登录鉴权处理方案

# 概念

当用户未登陆时，不允许进入除 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

在此处我们使用到了 vuex 中的 getters ，此时的 getters 被当作 快捷访问 的形式进行访问

所以我们需要声明对应的模块，创建 store/getters

const getters = {
  token: state => state.user.token
}
export default getters

1
2
3
4

在 store/index 中进行导入：

import getters from './getters'
export default createStore({
  getters,
  ...
})

1
2
3
4
5

上次更新: 2025/12/15, 09:54:48

← 响应拦截器处理方案退出登录处理方案→