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()
}
})