vue+vuex+vue-route实现简单登陆

不多说直接上代码吧 

vuex内容 -- store -> login.js

const state = {
token: window.sessionStorage.getItem('token')
}

const getters = {
}

const mutations = {
SET_TOKEN (state, res) {
state.token = res.code
   window.sessionStorage.setItem('token', res.code)
}
}

const actions = {}

export default {state, getters, mutations, actions}

token: 一个登陆的标记

adminRouter.beforeEach((to, from, next) => {
const token = adminStore.state.login.token
 if (to.meta.requireAuth) {
   if (token) {
     next()
} else {
next({
path: '/login'
       // query: {redirect: to.fullPath}
     })
}
} else {
next()
}
})

路由拦截

const Login = r => require.ensure([], () => r(require('../../views/main-app/Login.vue')), 'Login')

const login = [
{
path: '/login',
   name: 'Login',
   components: {
'login': Login
   }
}
]

export default login
{
path: '/menu',
 name: 'menuList',
 meta: {
requireAuth: true
 },
 components: {
'nav-app': asideApp,
   'preview-app': menuList
 }
}

路由配置

meta标签 ->requireAuth:true 标记此路由是否需要登陆

methods: {
 submitForm (ruleForm) {
   this.$refs[ ruleForm ].validate((valid) => {
     if (valid) {
       let userInfo = 2
       this.$api.post('/loginVerify', {userInfo: userInfo}).then((res) => {
         if (res.data.code === 200) {
           this.$store.commit('SET_TOKEN', res.data.user)
           alert('登陆成功')
           this.$router.push({name: 'Dashboard'})
         } else {
           alert('失败')
         }
       })
       console.log(this.$store.state.login)
     } else {
       return false
     }
   })
 }
}

登陆页面测试代码


以上就是基本实现登陆的代码 

细节问题还需要自己修改更正

End

评论区(0)

暂时还没有留言哦

给我留言