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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
微信小程序工具函数封装
Oct 28 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
example2.php
2006/10/09 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
pytorch 共享参数的示例
2019/08/17 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
银行求职推荐信范文
2013/11/30 职场文书
搞笑获奖感言
2014/01/30 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL