vue中使用router全局守卫实现页面拦截的示例

网络编程 2024/12/22 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

一、背景

　　在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();
 }
 }
);

3.初始化动态路由

在全局守卫对应条件下加载动态路由数据routerList和在登录成功时存储登录成功的信息loginInfo

新建一个xxx.js文件引入axios 创建一个函数并使用export 暴露该方法;

请求成功拿到数据后，把数据造成和routes里的数据一样。然后使用 router.addRoutes 添加进去;

index中的默认路由

import axios from 'axios'
export const initRouter = (router,store)=>{
 if (store.state.routerList.length > 0) {
 return;
 }
 axios.get(' URL')
  .then((rest)=>{
  let routerList = [];
  if(rest.data.success){
  let routers = rest.data.body;
  routers.forEach(router=>{
   let {
    path,
    component,
    name,
   } = router
   let routerObj = {
    path:path,
    name:name,
    component(resolve){
    if (component.startsWith("index")) {
     require(['../components/' + component + '.vue'], resolve)
    }  
    
    },
    meta:{requireAuth:true} //是否是登录权限控制
   };
   routerList.push(routerObj);
   });
  //add到router中
  router.addRoutes(routerList); 
  //存储到vuex中
  store.commit('routerList', routerList); 

  }else{
   console.log(rest.data.error);
  }
 }).catch((error)=>{
  console.log(error);
 })
}

4.登录成功后存储成功状态信息并跳转页面

至此，页面拦截功能已实现。

五、总结

　　该方法实现主要用到了:

　　1.vuex及页面刷新时会对vuex进行清空，所以比如退出时要对页面window.location.reload()，其它地方类似。

　　2.router.beforeEach()钩子函数及关键的router.addRoutes方法

　　3.es6的一些写法

以上就是vue中使用router全局守卫实现页面拦截的示例的详细内容，更多关于vue 页面拦截的资料请关注其它相关文章！

vue,页面拦截,vue,router全局守卫

标签：

vue,页面拦截,vue,router全局守卫

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“vue中使用router全局守卫实现页面拦截的示例”

暂无vue中使用router全局守卫实现页面拦截的示例的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

vue中使用router全局守卫实现页面拦截的示例

vue,页面拦截,vue,router全局守卫

vue中使用腾讯云Im的示例

vue使用video插件vue-video-player详解

评论“vue中使用router全局守卫实现页面拦截的示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接