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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
Vue二次封装axios为插件使用详解
May 21 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 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数组及条件,循环语句学习
2012/11/11 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
Google韩国首页图标动画效果
2007/08/26 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
django 外键model的互相读取方法
2018/12/15 Python
tornado+celery的简单使用详解
2019/12/21 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Python读取表格类型文件代码实例
2020/02/17 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
学习演讲稿范文
2014/05/10 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技