vue 路由跳转时候根据权限控制来确认是否可以跳转

昨天一个同事问了我对路由跳转的时候做的权限处理是如何做的,然而我还没做,刚好同事问到了,就一起探讨了一下vue对路由封装了一个方法方便对所有的路由跳转之前进行一些处理

1. 介绍 beforeEach

这个方法接收三个参数 to from next 分别是

  • 要跳转到哪个路由
  • 从哪个路由跳转过来的
  • 是否允许进入路由(接收参数为 true || false)

2. 检测登录状态

检测登录状态的方式因项目而异,可以通过接口访问获取状态,在全局设置一个状态进行处理 或 在登录时候后端一般会带给一个 token 值,将这个 token 值存储在本地,每次跳转路由的时候都去取这个 token 值再去请求登录状态接口,然后更新本地的 token值等...

3. 预设条件

假设已经在 vuex 的 state 设定了一个全局登录状态 isLogin

4. 遍历路由之前

在 router 的 index.js 文件内在这直接获取登录状态的话是一直是 false 的,因为在路由遍历开始的时候所有的组件的 created 都还没有触发,也就意味这还没有发出任何 ajax 请求,那么在这 个时候直接获取isLogin 的话肯定是 false 的 router.beforeEach ((to, from, next) => { })

5. 获取状态

先把获取状态的 ajax 请求定义在 vuex的 actions 的 getLoginState 方法 内


getLoginState () {
 // 这里一定要把这个请求 return 出来
 return axios.get('/getLoginState')
}

6.遍历路由

// 先引入 store
import store from './store'
router.beforeEach ((to, from, next) => {
    store.dispatch('getLoginState').then(res => {
        // 如果登录状态为 true, 允许跳转
        if (res.data.code === `0`) {
            next(true)
        } else {
            //没有登录的话直接跳转登录页面
            router.push('/login')   
        }
    })
})
// 权限判断也是一个道理就不多说了

明天休息,准备去迪士尼了😄