vue-router 守卫 鉴权

路由导航守卫

路由导航守卫共有三种

共有三个参数
to: Route即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next():进入页面

1. 全局路由守卫

const router = new VueRouter({
      ... })

router.beforeEach((to, from, next) => {
     
  // ...
})

2. 路由独享守卫

const router = new VueRouter({
     
  routes: [
    {
     
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
     
        // ...
      }
    }
  ]
})

3. 组件内守卫

组件内守卫共有三种
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

beforeRouteEnter(to, from, next) {
     
 // 在渲染该组件的对应路由被 confirm 前调用
 // 不！能！获取组件实例 `this`
 // 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
     
 // 在当前路由改变，但是该组件被复用时调用
 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
 // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 // 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
     
 // 导航离开该组件的对应路由时调用
 // 可以访问组件实例 `this`
}

管理后台的登录鉴权案例：

• 如果用户没有登录，就将页面直接重定向到登录页面
• 如果用户已经登陆，再访问登录页面的话，就将页面重定向到管理后台页面

在main.js中定义全局路由守卫

router.beforeEach((to, from, next) => {
     
//如果是登陆页面
  if (to.path == "/login") {
     	
  //判断用户是否登陆，当token不为空
    if (store.state.token !== "") {
     	
    //重定向到管理后台首页
      next("/home")	
    }
    // 非登陆页面判断
  } else {
     
  //判断用户是否登陆，用户未登录的情况下
    if (store.state.token == "") {
     
    //重定向到登陆页面
      next("/login")
    }
  }
  next()
});