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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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+DBM的同学录程序(3)
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
php实现图片添加水印功能
2014/02/13 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用python实现tcp自动重连
2017/07/02 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python 19个值得学习的编程技巧
2020/08/15 Python
详解python对象之间的交互
2020/09/29 Python
Python中Selenium模块的使用详解
2020/10/09 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
酒店副总岗位职责
2013/12/24 职场文书
《长城》教学反思
2014/02/14 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
纪检部部长竞选稿
2015/11/21 职场文书