关于Vue中的全局导航守卫(beforeEach、afterEach)
全局导航守卫(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(); });
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
element tree懒加载:load="loadNode"只触发一次的解决方案
本文主要介绍了element tree懒加载:load="loadNode"只触发一次的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-08-08Vue-router优化import引入过多导致index文件臃肿问题
这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08el-select自定义指令实现触底加载分页请求options数据(完整代码和接口可直接用)
某些情况下,下拉框需要做触底加载,发请求,获取option的数据,下面给大家分享el-select自定义指令实现触底加载分页请求options数据(附上完整代码和接口可直接用),感兴趣的朋友参考下吧2024-02-02webstorm提示 @路径 Module is not installed的问题
这篇文章主要介绍了webstorm提示 @路径 Module is not installed的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-11-11vue获取当前日期时间(使用moment和new Date())
在项目开发中我遇到了日期范围选择器,两种获取当前日期并做处理的写法,这里记录一下,下面这篇文章主要给大家介绍了关于vue获取当前日期时间(使用moment和new Date())的相关资料,需要的朋友可以参考下2023-06-06
最新评论