vue路由守卫,限制前端页面访问权限的例子


Posted in Javascript onNovember 11, 2019

今天给大家写一篇关于vue校验登录状态,如果是非法登录就跳转到登录页面的逻辑

首先需要写一个路由守卫,它的原理是每次路由发生变化时触发具体写法如下:

router.beforeEach((to, from, next) => {
  next()
})

beforeEach函数有三个参数:

to:即将进入的路由对象

from:当前导航即将离开的路由

next,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。

使用案例

限制登陆功能,具体实现思路:每次跳转路由是判断本地 localStorage.getItem('token') 状态

首先找到router/index.js如下

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
 
const router = new Router({
 routes: [{
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
  {
   path: '/login',
   name: 'login',
   component: login
  }
 ]
})
//下面是重点 
router.beforeEach((to, from, next) => {
 let token = localStorage.getItem('token') 
 if (to.path == '/login') {
  next()
 } else {
  if (token == '' || token == null) {
   next('/login');
  } else {
   next()
  }
 }
 
})
 
export default router;

解释:index.js写成如上形式,用const router 接受 new Router对象,最后export暴露出去

router.beforeEach 在每次路由跳转出发

let token = localStorage.getItem('token') 获取本地没有没token 如果没有就跳到login页面 很简单的逻辑

以上这篇vue路由守卫,限制前端页面访问权限的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 #Javascript
vuex存储token示例
Nov 11 #Javascript
Vuex实现数据增加和删除功能
Nov 11 #Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 #Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 #Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 #Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 #Javascript
You might like
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php上传文件常见问题总结
2015/02/03 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python通过函数属性实现全局变量的方法
2015/05/16 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python打印斐波拉契数列实例
2015/07/07 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
个人应聘自我评价分享
2013/11/18 职场文书
洗车工岗位职责
2014/03/15 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
董事长致辞
2015/07/29 职场文书
学校食堂管理制度
2015/08/04 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python