导航守卫

作用：控制路由的访问权限

全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置导航守卫
因此，程序员可以对每个路由进行访问权限的控制

//创建路由实例对象
const router = new VueRouter({...})
                              
//调用路由实例对象的beforeEach方法，即可声明"全局前置守卫"
//每次发生路由导航跳转的时候，都会自动触发fn这个函数
                              
router.beforEach(function(){})                              

守卫方法的3个形参

全局前置守卫的回调函数接收3个形参，格式为：

to 是将要访问的路由的信息对象
from 是将要离开的路由的信息对象
next 是一个函数，调用next(),表示放行，允许这次路由导航

//一律不放行
router.beforeEach((to,from,next)=>{
  
})

//无论什么情况，一律放行
router.beforeEach((to,from,next)=>{
  next()    
})

next函数的三种调用方式

代码实现

分析

• 要拿到用户将要访问的hash地址

• 判断hash地址是否等于/main

  • 不等于/main,无需登录，直接放行next()

  • 等于/main,证明需要登录才能访问,需要读取localStorage中的token值

    • 有token，放行
    • 无token，强制跳转到/login，登录页

router.beforeEach((to,from,next)=>{
    if(to.path === '/main'){
        const token = localStorage.getItem('token')
        if(token){
            next() //访问后台主页，且有token=>放行
        }else{
            next('/login') //无token，跳转到登录界面
        }
    }else{
        next() //访问的不是后台主页，直接放行
    }
})