vue 设置路由的登录权限的方法


Posted in Javascript onJuly 03, 2018

index.js

将需要登录权限的路由设置meta属性

vue 设置路由的登录权限的方法

meta:{requireAuth:true},

main.js

在main.js内直接写对路由的验证

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
    if (sessionStorage.getItem("access_token")) { // 判断当前的token是否存在
      next();
    }
    else {
      next({
      path: '/manage',
      query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
    })
    }
  }
  else {
    next();
  }
});

总结

以上所述是小编给大家介绍的vue 设置路由的登录权限的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 #Javascript
Vue props用法详解(小结)
Jul 03 #Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 #Javascript
详解Vue中使用Echarts的两种方式
Jul 03 #Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 #Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 #Javascript
You might like
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
js几个验证函数代码
2010/03/25 Javascript
Dojo 学习要点
2010/09/03 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Django自定义分页效果
2017/06/27 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
企业党员公开承诺书
2014/03/26 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
生活小常识广播稿
2014/09/16 职场文书
运动会开幕词
2015/01/28 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android