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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
js数组去重的方法汇总
Jul 29 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
javaScript Array api梳理
Mar 31 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
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python中partial()基础用法说明
2018/12/30 Python
Python 互换字典的键值对实例
2019/02/12 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
django API 中接口的互相调用实例
2020/04/01 Python
python3的pip路径在哪
2020/06/23 Python
Python面向对象实现方法总结
2020/08/12 Python
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
男女朋友协议书
2014/04/23 职场文书
建筑投标担保书
2014/05/20 职场文书
六年级学生评语大全
2014/12/26 职场文书
学生会辞职信
2015/03/02 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
小学生教师节广播稿
2015/08/19 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL