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的动态创建表格的插件
Apr 05 Javascript
js constructor的实际作用分析
Nov 15 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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 date函数参数详解
2006/11/27 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
详解Python的Lambda函数与排序
2016/10/25 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
年终考核实施方案
2014/05/26 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
win10清理dns缓存
2022/04/19 数码科技
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技