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


Posted in Javascript onOctober 23, 2020

一、背景

在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由。而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论)

二、使用场景

静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的;

动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了。假如用户登录了,在地址栏修改地址便能直接访问。所以动态路由并不能起到拦截作用。

三、解决方案

使用vuex+router.beforeEach()+动态路由实现页面拦截

页面刷新时会清楚vuex里面的值;(防止直接修改地址栏)

router.beforeEach()对跳转前进行拦截判断;(对vuex里面的值进行判断)

当用户登录时请求后台拿到数据,加载路由.(跳转页面)

四、实现过程

1.首先定义vuex里面的值,需要定义两个值:

a.登录状态信息的值 loginInfo 

b.存储动态路由的值 routerList

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

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中的默认路由

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

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.登录成功后存储成功状态信息并跳转页面

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

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

五、总结

该方法实现主要用到了:

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

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

3.es6的一些写法

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

Javascript 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
vue使用video插件vue-video-player详解
Oct 23 #Javascript
vue-video-player视频播放器使用配置详解
Oct 23 #Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 #Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 #Javascript
vuejs实现下拉框菜单选择
Oct 23 #Javascript
vue 如何使用递归组件
Oct 23 #Javascript
vue 如何从单页应用改造成多页应用
Oct 23 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP 身份证号验证函数
2009/05/07 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
激活 ActiveX 控件
2006/10/09 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
python3中property使用方法详解
2019/04/23 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
中秋节主题班会
2015/08/14 职场文书