关于Vue中的全局导航守卫(beforeEach、afterEach)
短信预约 -IT技能 免费直播动态提醒
全局导航守卫(beforeEach、afterEach)
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。
vue-router 提供了导航钩子:全局前置导航钩子 beforeEach 和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在 beforeEach 导航钩子中进行判断。
导航钩子有3个参数
1、to:即将要进入的目标路由对象；
2、from:当前导航即将要离开的路由对象；
3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。
next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由beforeEach
实现用户验证的代码：
router.beforeEach((to, from, next) => {
//我在这里模仿了一个获取用户信息的方法
let isLogin = window.sessionStorage.getItem('userInfo');
if (isLogin) {
//如果用户信息存在则往下执行。
next()
} else {
//如果用户token不存在则跳转到login页面
if (to.path === '/login') {
next()
} else {
next('/login')
}
}
})afterEach
和 beforeEach 不同的是 afterEach 不接收第三个参数 next 函数，也不会改变导航本身，一般 beforeEach 用的最多，afterEach 用的少
router.afterEach((to,from)=>{ //这里不接收next
console.log(to);
console.log(from);
})全局导航守卫是干什么的？
应用场景： 登录页面防止用户页面直接在地址栏中可以访问其他页面；
背景： 在 地址栏当中输入地址可以访问其他页面；然而我们需要一个系统当中来进行拦截；
那就是全局导航守卫来进行拦截， 用vue-Router 实例的方法来实现的；
1.在router中的index.js文件里引入vue-router
import Router from 'vue-router'
Vue.use(Router)2.创建路由实例
const router = new Router({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/home', component: Home}
]
})3.挂载全局导航守卫
//全局路由前置守卫 --路由拦截
router.beforeEach((to, from, next) => {
// to 将要前往的路由
//from 从哪个路由过来的
//next(path) 是一个函数 表示继续执行下一步，强制执行前往的path 路由
//如果前往login 页面 则不需要token 直接进入就可以
if (to.path === "/login") return next();
//获取token
const TOKEN = window.sessionStorage.getItem("TOKEN");
if (!TOKEN) {
//token 不存在 name 意味着 没有进行登录 返回登录页面
next({ path: "/login" });
}
//已经 存在TOKEN name 就可以进行
next();
});以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
