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 事件冒泡简介及应用
Jan 11 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
Vue基于NUXT的SSR详解
Oct 24 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 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/12/25 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
javascript eval函数深入认识
2009/02/21 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
js 居中漂浮广告
2010/03/21 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
javascript arguments使用示例
2014/12/16 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python实现自动更换ip的方法
2015/05/05 Python
python学习 流程控制语句详解
2016/06/01 Python
python如何在终端里面显示一张图片
2016/08/17 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python单例模式实例解析
2018/08/28 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
html5与css3小应用
2013/04/03 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
UNIX特点都有哪些
2016/04/05 面试题
质量提升方案
2014/06/16 职场文书
本科应届生自荐信
2014/06/29 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
滴水洞导游词
2015/02/10 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang