1. 首页
  2. web前端
  3. 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')   
        }
    })
})

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=308

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code