登录鉴权处理方案
# 概念
当用户未登陆时,不允许进入除
login
之外的其他页面。用户登录后,
token
未过期之前,不允许进入login
页面
# 实现方式
# 代码实现
在 main.js
平级,创建 permission
文件,并在 main.js
中进行导入
import router from './router'
import store from './store'
// 白名单
const whiteList = ['/login']
/**
* 路由前置守卫
*/
router.beforeEach(async (to, from, next) => {
// 存在 token ,进入主页
// if (store.state.user.token) {
// 快捷访问
if (store.getters.token) {
if (to.path === '/login') {
next('/')
} else {
next()
}
} else {
// 没有token的情况下,可以进入白名单
if (whiteList.indexOf(to.path) > -1) {
next()
} else {
next('/login')
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
在此处我们使用到了 vuex 中的 getters
,此时的 getters
被当作 快捷访问 的形式进行访问
所以我们需要声明对应的模块,创建 store/getters
const getters = {
token: state => state.user.token
}
export default getters
1
2
3
4
2
3
4
在 store/index
中进行导入:
import getters from './getters'
export default createStore({
getters,
...
})
1
2
3
4
5
2
3
4
5
上次更新: 2024/08/14, 04:14:33