导航守卫可以控制路由的访问权限
未使用导航守卫时在未登录的情况下访问后台主页,无法控制访问权限,用户可以直接访问后台主页。相反导航守卫在检测到未登录时会强制跳转到登录页
全局前置守卫
每次发生路由的导航跳转时,都会触发全局前置守卫。
调用路由实例对象的beforeEach方法可声明全局前置守卫
回调函数中三个形参
to是将要访问的路由的信息对象
from是将要离开路由的信息对象
next是一个函数,调用next()表示放行,允许这次路由导航
next函数的3种调用方式
当前用户拥有后台主页的访问权限,直接放行:next()
当前用户没有后台主页的访问权限,强制其跳转到登录页面:next('/login')
当前用户没有后台主页的访问权限,不允许跳转到后台主页:next(false)
//控制后台主页的访问权限
router.beforeEach(function(to,from,next){
if(to.path==='/main'){
const token=localStorage.getItem('token')
if(token){
next()
}else{
next('/login')
}
}else{
next()
}