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 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
实例讲解JavaScript预编译流程
Jan 24 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
年终自我鉴定
2013/10/09 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
化验员岗位职责
2015/02/14 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
《西门豹》教学反思
2016/02/23 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python