vue中的router路由守卫

最新推荐文章于 2024-01-12 15:28:41 发布

逐渐秃头的女子

最新推荐文章于 2024-01-12 15:28:41 发布

阅读量309

点赞数 1

分类专栏： vue初学者 router 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43714712/article/details/120242568

版权

vue初学者同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

router

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了在Vue.js应用中如何实现路由访问权限控制。通过创建白名单列表，结合Vuex管理和beforeEach钩子函数，检查用户是否持有token并决定其访问权限。当有token时，判断是否需要跳转；无token时，根据白名单决定是否允许访问。该方法确保了用户在不同状态下的正确导航，并实现了登录状态的校验。

摘要由CSDN通过智能技术生成

基本套路是一样的，要看具体需求，编写路由访问权限

[1 ] 创建白名单列表（不需要token的）
[ 2] js文件使用router和vuex对象，需要导入
[ 3] 使用beforeEach方法，传入3个参数，to,from,next
[4 ] 根据具体业务需求编写逻辑代码
- [ 4-1] 有token——>怎么做
- [4-2 ] 无token——>干什么

// 权限控制
import router from '@/router'//路由对象
import store from '@/store'//vuex对象

const whiteList = ['/login', '404']//称为白名单，意思就是不需要有token，就可以访问到的路径
router.beforeEach(async function(to, from, next) {
//to 要去哪里的路径
//from 从哪里来的路径
//next 放行，就是我们可以让他哪里都去 next(),或者强制去的路径 next('你想要去的路径')

  const token = store.getters.token//得到token
  //后面其实都是根据你的真实要求来写
  
  if (token) {
    // 如果有token
    if (to.path === '/login') {
      // 如果有token，且要去登录，强制跳转到首页
      next('/')
    } else {
      // 如果有token，但不去登录，放行
      // 先获取数据再进行跳转
      if (!store.getters.userId) {
        // 已经有用户id了，就不要再发送了
        await store.dispatch('user/asyncGetUserInfo')// 一定不能少user 模块 我们在vuex的actions写好的方法
        console.log('获取用户信息再跳转')
        // next()//如果在这里，登录之后就进不来这里，就无法放行
      }
      next()
    }
  } else {
    // 如果无token
    // 假如在白名单，则直接放行，不在则直接强制跳转到登录
    if (!whiteList.includes(to.path)) {
      next('/login')
    } else {
      next()
    }
  }
})