vue路由守卫的基本使用

vue路由守卫的基本使用

基本介绍

路由守卫：

每个路由在执行的时候都会经历一些"关口"，关口可以决定是否 继续前进 或 执行其他路由 或 停止当前路由执行 ，关口就是守卫，有着一夫当关万夫莫开的效果。

应用场景：

​ 每个项目都要使用守卫，例如后台管理系统，很多组件页面要求只有处于登录状态的用户才可以访问，判断是否登录就是通过守卫做的。

守卫使用

语法：

// 全局前置守卫，所有的路由在执行之前都会经过该守卫。
router.beforeEach((to, from, next) => { 
    /* 导航守卫 处理逻辑 */ 
})

// router是 new VueRouter() 得到的路由对象
// 参数是一个箭头函数

• to:是一个对象，保存着将要访问的路由相关参数。
  • to.path:被访问的路由地址信息
• from:是一个对象，保存着离开的那个路由的相关参数。
  • from.path: 从哪来的路由地址
• next:是一个回调函数，对后续的执行起着 拦截 或 放行 的作用。
• 如果没有特殊情况，请一定执行next()方法，以进行后续操作，否则页面没有效果了。

next()方法使用示例：

next('/login')   // 执行其他路由，例如登录

next(false)  // 停止当前路由执行

next()  // 放行，执行后续动作

部署守卫：

在main.js的new VueRouter()代码之后设置如下代码：

// 判断用户是否登录
router.beforeEach((to,from,next)=>{
  const isAuth = localStorage.getItem('userLoginToken')
  if(to.path !== '/login' && !isAuth){
      next({path:'/login'})
  }else{
      next()
  }
})