1. 导航守卫
2.全局前置守卫
每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，可以对每个路由进行 访问权限的控制：
router/index.js
//.创建路由示例对象
const router = new VueRouter({
........................
})
// 调用实例对象 ,声明全局 前置导航守卫 即 beforeEach
//每次路由跳转,都会自动触发 fn这个回调函数
router.beforeEach(fn)
3.守卫方法的三个形参
//.创建路由示例对象
const router = new VueRouter({
........................
})
// 为router实例对象 ,声明全局 前置导航守卫 即 beforeEach
// 只要发生了路由的跳转 ->触发 beforeEach指定的function回调函数
router.beforeEach(function (to, from, next) {
// to 将要访问的路由信息
// from 将要离开的路由信息对象
// next()表示放行
next()
})
4.next 函数的 3 种调用方式
5.控制后台主页的访问权限
router.beforeEach(function (to, from, next) {
// 分析:
// 1.要拿到用户将要访问的hash地址
// 2.判断是否等于 /main 如果 等于/main,证明需要登录之后才能访问
// 3.如果不等于 /main 直接放行 next()
// 4.如果访问地址是/main 则需要读取loclStorage中的token值
// 5.如果没有 token 放行
// 6.如果 没有token 则强制跳转 /login
if (to.path === '/main') {
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
} else {
next()
}
})
