vue中的router路由守卫

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

• [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()
    }
  }
})