vue中使用router全局守卫实现页面拦截-创新互联
本篇文章为大家展示了vue中使用router全局守卫实现页面拦截,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联主营江山网站建设的网络公司,主营网站建设方案,app软件开发,江山h5微信平台小程序开发搭建,江山网站营销推广欢迎江山等地区企业咨询一、背景
在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由。而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论)
二、使用场景
静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的;
动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了。假如用户登录了,在地址栏修改地址便能直接访问。所以动态路由并不能起到拦截作用。
三、解决方案
使用vuex+router.beforeEach()+动态路由实现页面拦截
页面刷新时会清楚vuex里面的值;(防止直接修改地址栏)
router.beforeEach()对跳转前进行拦截判断;(对vuex里面的值进行判断)
当用户登录时请求后台拿到数据,加载路由.(跳转页面)
四、实现过程
1.首先定义vuex里面的值,需要定义两个值:
a.登录状态信息的值 loginInfo
b.存储动态路由的值 routerList
2.router.beforeEach()对路由跳转前进行控制
//全局守卫 router.beforeEach((to, from, next)=> { let userId = store.state.loginInfo.id; //这里是对登录后的值进行判断,也可对token的值进行判断 if (userId === '') { if (to.meta.requireAuth || to.name == null) { next({path: '/'}) } else { next(); } } else { //初始化动态路由方法 initRouter(router, store); next(); } } );
当前标题:vue中使用router全局守卫实现页面拦截-创新互联
网页路径:http://ybzwz.com/article/hodgs.html