vue 导航守卫

vue 导航守卫
from：从哪来
to：到哪里去
next是一个函数决定是否放行 ，next（）放行，next（’/login’）拦截到login
配置全局前置守卫，在router文件中进行配置
所有的路由在被真正访问之前，都会经过全局前置守卫放行了，你才能访问到对应的路由
consle.log(to)
注意fullPath和path的区别

/ 全局前置守卫: 所有的路由在被真正访问之前, 都会先经过全局前置守卫
// 只有全局前置守卫放行了, 才能真正的访问到你需要访问的路由
// to 到哪去
// from 从哪来
// next 是一个函数, 决定了是否放行, next()放行, next('/login')拦截到登录
// 将来的页面两种情况:
// 1. 需要授权才能访问  个人中心页, 我的收藏, 我的关注 ...
// 2. 不需要授权, 可以直接访问的  首页 登录页 注册页
// 这个数组中, 专门存放所有需要授权的路径
const AuthUrls = ['/profile']

router.beforeEach((to, from, next) => {
  // 需要授权的 和 不需要授权访问的处理是不一样的
  // 1. 如果要去的路径, 在授权数组中, 说明需要授权才能访问
  // console.log(to.path)  // /profile
  if (AuthUrls.includes(to.path)) {
    // 2. 需要授权访问的路径, 判断有没有token令牌
    //    有token放行, 没有token, 拦截到登录
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    // 不需要授权访问的路径, 放行
    next()
  }
})