最近在做vue的项目,需要处理这样一个情况:用户需要先登录再进入应用 这是项目中很常见的问题,不过由于是第一次处理,而且是第一次用前端做鉴权,故自己记录一下 之前由于vuex难于理解,所以不太敢深入这部分,今天又重新拾起来了

vuex是专为vue应用程序开发的状态管理模式,不熟悉的读者可以参考Vue入门(十)----vuex

前端鉴权

vuex是必须的,因为鉴权需要全局都监听到输入的用户名和密码,使用组件通信来监听十分不可取

vuex.js

1
2
3
4
5
6
7
8
9
···
const state = {
userId: '',
pwd: '',
}
export default new Vuex.Store({
state,
})
···

给需要鉴权的界面路由添加meta属性,定义checkLogined为true

router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
···
{
path: '/a',
name: 'a',
component: a,
meta: {checkLogined: true},
},
{
path: '/b',
name: 'b',
component: b,
meta: {checkLogined: true},
},
{
path: '/c',
name: 'c',
component: c,
meta: {checkLogined: true},
},
···

在App.vue的main.js文件中进行鉴权,采用vue的路由守卫router.beforeEach()

如果vuex中的用户名和密码已经输入过,并保存下来了,那么路由就会进行next()跳转,反之只能跳转login页面

1
2
3
4
5
6
7
8
9
10
11
router.beforeEach((to, from, next) => {
if (to.meta.checkLogined) {
if (store.state.userId != '' && store.state.pwd != '') {
next();
} else {
next({
path: "/login"
});
}
}
});

基本理论就是这样,虽然google了不少,也在群里问了好多人,不过最后还算是做出来了

做项目切记要保证好路由逻辑的正确性,不然后期很难改,今天在路由路径的写法上花了不少功夫