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 相关文章推荐
Javascript的并行运算实现代码
Nov 19 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
小程序实现录音上传功能
Nov 22 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 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
调频问题解答
2021/03/01 无线电
PHP 字符串分割和比较
2009/10/06 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
python Flask实现restful api service
2017/12/04 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
财务人员担保书
2014/05/13 职场文书
拓展策划方案
2014/06/03 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
2014年大学生工作总结
2014/11/20 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
Python之matplotlib绘制折线图
2022/04/13 Python
Python使用永中文档转换服务
2022/05/06 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server