Vue路由守卫

参考文档：Vue中文文档 https://cn.vuejs.org/

路由守卫的作用

  在项目开发中，有些页面是用户必须登录才能访问的，所以，在用户刷新网页和切换路由的时候，都需要判断是否登录。vue-router提供了导航钩子，beforeEach（全局前置导航钩子）和afterEach(全局后置导航钩子)，在路由改变前和改变后进行触发，所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子的三个参数：

1. to:即将要进入的目标路由对象
2. from:当前导航即将要离开的路由对象
3. next ：调用该方法后，才能进入下一个钩子函数（afterEach）
   • next( ) // 直接进to 所指路由
   • next( false ) // 中断当前路由
   • next(‘route’) // 跳转指定路由
   • next(‘error’) // 跳转错误路由

beforeEach（全局前置导航钩子）

演示说明：本实例使用vue-cli脚手架，安装了vue-router插件。

// 在main.js 中全局配置路由守卫（简单粗暴）,当然也可以在 router/index.js下配置。

// 路由守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  // 如果访问的是登录页面、首页、注册页面则正常访问（放行）
  if (to.path === '/login' || to.path === '/' || to.path === '/register') {
    return next()
    // 如果没有拿到token值，即没有登录的时候，跳转到登录页面
  } else if (!token) {
    return next('/login')
    // 否则就正常访问
  } else {
    return next()
  }
})

afterEach（全局后置导航钩子）

和beforeEach不同的是，afterEach不接受第三个参数Next()

// 这里不接收next
router.afterEach((to,from)=>{ 
    // 跳转成功做的事情（简单打印一下进入的目标对象，以及即将要离开的对象）
    console.log(to);
    console.log(from);
})

总结

  为了保证系统的安全性，前后端都需要判断用户访问的路由，前端就需要用到路由守卫，相比较beforeEach用到的是非常多的，而afterEach用到的比较少，设置路由守卫，我们避免掉了用户记住访问的路由，在没有登录的情况下访问登录之后才能访问的页面。