Vue2-路由-路由前置守卫

1、路由前置守卫的作用

通常用于拦截用户没有权限的访问

例如：用户没有登录就访问首页

解决方案：理由路由前置守卫进行拦截，前置跳转到登录页面

//语法：
router.beforeEach((to, from, next) => {
  // 1. to 往哪里去， 到哪去的路由信息对象
  // 2. from 从哪里来， 从哪来的路由信息对象
  // 3. next() 是否放行
  // 如果next()调用，就是放行
  // next(路径) 拦截到某个路径页面
  // to.path是用户想要访问的路径
})

2、简单应用

 const router = new VueRouter({
  // 路由规则已经配好
  routes
})

// 路由前置守卫
router.beforeEach((to, from, next) => {
  // 用户是否想要跳转到登录页或注册页
  if ((to.fullPath !== '/login') && (to.fullPath !== '/register')) {
    // 用户是否有token（是否已登录）
    if (getToken()) {
      // 登录了-放行
      next()
    } else {
      // 没登陆-强制跳转到登录页
      next('/login')
    }
  } else {
    // 用户想到登录页或注册页-直接放行
    next()
  }
})