本篇文章为大家展示了vue中使用路由器全局守卫实现页面拦截,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>一、背景强>
在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由。而要实现对路由的控制需要使用vuex和路由器全局守卫进行判断拦截(安全问题文章最后讨论)
<强>二、使用场景强>
静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的;
动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到路由器里面了。假如用户登录了,在地址栏修改地址便能直接访问。所以动态路由并不能起到拦截作用。
<强>三,解决方案强>
使用vuex + router.beforeEach() +动态路由实现页面拦截
页面刷新时会清楚vuex里面的值;(防止直接修改地址栏)
router.beforeEach()对跳转前进行拦截判断;(对vuex里面的值进行判断)
当用户登录时请求后台拿到数据,加载路由。(跳转页面)
<强>四,实现过程强>
1。首先定义vuex里面的值,需要定义两个值:
。登录状态信息的值loginInfo
b。存储动态路由的值,routerList
2. router.beforeeach()对路由跳转前进行控制
//全局守卫 路由器。beforeEach(下),从=比;{ 让用户id=store.state.loginInfo.id;//这里是对登录后的值进行判断,也可对令牌的值进行判断 如果用户id===& # 39; & # 39;) { 如果(to.meta。requireAuth | | to.name==null) { 下({路径:& # 39;/& # 39;}) 其他}{ next (); } 其他}{//初始化动态路由方法 initRouter(路由器、存储); next (); } } );
3。初始化动态路由
在全局守卫对应条件下加载动态路由数据routerList和在登录成功时存储登录成功的信息loginInfo
新建一个xxx。js文件引入axios创建一个函数并使用出口暴露该方法;
请求成功拿到数据后,把数据造成和线路里的数据一样,然后使用router.addRoutes 添加进去;
索引中的默认路由
从& # 39;进口axios axios& # 39; 出口const initRouter=(路由器、存储)=祝辞{ 如果(store.state.routerList。长度比;0){ 返回; } axios.get (& # 39;url # 39;) 不要犹豫((rest)=祝辞{ 让routerList=[]; 如果(rest.data.success) { 让路由器=rest.data.body; routers.forEach(路由器=祝辞{ 让{ 路径, 组件, 的名字, }=路由器 让routerObj={ 路径:路径, 名称:姓名、 组件(解决){ 如果(component.startsWith (“index")) { 要求([& # 39;. ./组件/& # 39;+组件+ & # 39;.vue& # 39;],解决) } }, 元:{requireAuth:真}//是否是登录权限控制 }; routerList.push (routerObj); });//添加到路由器中 router.addRoutes (routerList);//存储到vuex中 store.commit (& # 39; routerList& # 39;, routerList); 其他}{ console.log (rest.data.error); } }).catch((错误)=祝辞{ console.log(错误); }) }
4。登录成功后存储成功状态信息并跳转页面
,至此,页面拦截功能已实现。
<强>五、总结强>
该方法实现主要用到了:
1. vuex及页面刷新时会对vuex进行清空,所以比如退出时要对页面window.location.reload(),其它地方类似。
2. router.beforeeach()钩子函数及关键的路由器。addRoutes方法
3. es6的一些写法
上述内容就是vue中使用路由器全局守卫实现页面拦截,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。