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 相关文章推荐
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
jquery插件格式实例分析
Jun 16 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
利用js实现简单开关灯代码
Nov 23 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获取一个变量的名字的方法
2014/09/05 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP网络操作函数汇总
2015/05/18 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
Python星号*与**用法分析
2018/02/02 Python
python设置环境变量的作用和实例
2019/07/09 Python
python上selenium的弹框操作实现
2020/07/13 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
担保书格式及范文
2014/04/01 职场文书
股份合作协议书
2014/04/12 职场文书
公司户外活动总结
2014/07/04 职场文书
学校社团活动总结
2015/05/07 职场文书
辞职离别感言
2015/08/04 职场文书
行为习惯主题班会
2015/08/14 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js