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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 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入门的学习方法
2007/01/02 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python匹配中文的正则表达式
2016/05/11 Python
详解python里的命名规范
2018/07/16 Python
Python subprocess库的使用详解
2018/10/26 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
房地产开发计划书
2014/01/10 职场文书
自荐信需注意事项
2014/01/25 职场文书
公司人事任命通知
2015/04/20 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
高三化学教学反思
2016/02/22 职场文书
MySQL约束超详解
2021/09/04 MySQL
Javascript之datagrid查询详解
2021/09/15 Javascript
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python