第九十五篇:vue-router的导航守卫
好家伙,考完期末考了.
恢复博客更新
1.什么是导航守卫?
“导航”表示路由正在发生变化
设置导航,就在切换过程中进行限制
”守卫“就好理解了
盯着你,不然你乱跑
所以我们大概可以知道,
这是一个控制路由访问权限的东西
2.导航守卫有什么用?
导航守卫可以控制路由的访问权限
比如说,
有人来到我的网页了,
我要求它登录后才能继续一系列的操作,
这个时候我可以设置一个导航守卫来强制
游客跳转到登录界面
2.全局前置守卫
每次发生路由的导航跳转时,都会触发全局前置守卫。
因此,在全局守卫中,程序员可以对每个路由进行访问权限的控制
2.1.前置守卫的设置
//为router实例对象,声明去哪聚前置导航守卫
//只要发生了路由的跳转,必然会触发该函数
router.beforeEach(function(to,from,next){
//to 是将要访问的路由的信息对象
//from 是将要离开的路由的信息对象
//next 是一个函数,调用next()表示放行,允许这次路由导航,守卫放行了
next()
})
(beforexxx,有点生命周期的感觉了)
2.2.三个参数的作用
function(to,from,next)有三个参数
to 是将要访问的路由的信息对象
from 是将要离开的路由的信息对象
next 是一个函数,调用next()表示放行,允许这次路由导航,守卫放行了
2.3.next()的三种调用方式
第一种情况:当前用户拥有后台主页的访问权限,直接放行:next()
第二种情况:当前用户没有后台主页的访问权限,强制其跳转到登录页面:next('/login')
第三种情况:当前用户没有后台主页的访问权限,不允许跳转到后台主页:next(false)
2.4.关于token
2.5.配置路由守卫
1.要拿到用户将要访问的 hash 地址
2.判断 hash 地址是否等于/main。
2.1. 如果等于/main,证明需要登录之后,才能访问成功
2.2. 如果不等于/main,则不需要登录,直接放行 next()
3. 如果访问的地址是/main。则需要读取 localStorage 中的 token 值
3.1 如果有 token,则放行
3.2 如果没有 token,则强制跳转到/login 登录页
于是,
代码如下:
router.beforeEach(function(to,from,next){
//to 是将要访问的路由的信息对象
//from 是将要离开的路由的信息对象
//next 是一个函数,调用next()表示放行,允许这次路由导航,守卫放行了
if(to.path ==='/main'){
const token =localStorage.getItem('token')
//简单理解一下token是一个用来存储用户信息的加密字符串
if(token){
next()
}
else{
//没有登录,强制跳转
next('/login')
}
}
else{
next()
}
})
大概就这样了.
That's all
第九十五篇:vue-router的导航守卫的更多相关文章
- 第十五篇 Integration Services:SSIS参数
本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...
- 【译】第十五篇 Integration Services:SSIS参数
本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...
- 解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里?(译)
解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里?(译) http://improve.dk/where-does-sql-server-store-the-sourc ...
- Python之路【第十五篇】:Web框架
Python之路[第十五篇]:Web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...
- “全栈2019”Java第九十五章:方法中可以定义静态局部内部类吗?
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 跟我学SpringCloud | 第十五篇:微服务利剑之APM平台(一)Skywalking
目录 SpringCloud系列教程 | 第十五篇:微服务利剑之APM平台(一)Skywalking 1. Skywalking概述 2. Skywalking主要功能 3. Skywalking主要 ...
- Egret入门学习日记 --- 第十五篇(书中 6.1~6.9节 内容)
第十五篇(书中 6.1~6.9节 内容) 好的,昨天完成了第五章. 今天来看第六章. 总结重点: 1.如何对组件进行分组? 跟着做: 重点1:如何对组件进行分组? 首先,选中你想要组合的组件. 然后点 ...
- Vue Router的导航解析过程
在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步. 12步如下: 导航被触发. 在失活的组件里调用离开守卫beforeRouteLeave . 调用全局的 befo ...
- 淘宝(阿里百川)手机客户端开发日记第十五篇 JSON解析(四)
解析一个从淘宝传递的JSON (大家如有兴趣可以测试下):{ "tae_item_detail_get_response": { "data": { " ...
随机推荐
- 眼球3D可视化解决方案——案例详解
医疗器械行业伴随着人类健康需求的增长而不断发展,是名副其实的朝阳行业,也是全球发达国家竞相争夺的领域. 一方面,行业门槛高,集中度低,外资企业挤占市场空间成了我国所有医疗器械行业入局者面临的共同挑战. ...
- opencv-python获取视频信息
代码 import cv2 if __name__ == '__main__': # 读取视频 capture = cv2.VideoCapture('./videos/person.mp4') # ...
- ASP.NET MVC之models_list传值view
单个用户在查看个人信息时,一个model就能解决 但是如果是管理员,就需要查看多个用户,此时我们从数据库读一页的用户数据(大致十条) 此时返回的就可能是一个泛型列表 所以除了基本的用户model外(比 ...
- tail -f 、tail -F、tailf的区别
三者经常在工作中会使用到,以下是三条命令的区别,帮忙大家理解:1.tail -f 等同于--follow=descriptor,根据文件描述符进行追踪,当文件改名或被删除,追踪停止,但是不是断开. 2 ...
- DNS 系列(一):为什么更新了 DNS 记录不生效?
我们在上网时如果想要访问到另一台机器上的内容,通常只需要直接输入一串地址,例如:www.upyun.com,就能够准确访问到自己想要访问的网站.但是实际上这只是方便我们记忆的字符形式网络标识,真正让我 ...
- SLSA 框架与软件供应链安全防护
随着软件供应链攻击浪潮愈演愈烈,Google 发布了一系列指南来确保软件包的完整性,旨在防止影响软件供应链的未经授权的代码修改.新的 Google SLSA 框架(Supply-chain Level ...
- Jira7.3.8环境搭建
安装JDK sudo apt-get install openjdk-8-jdk 安装&配置MySQL sudo apt-get install mysql-server 创建jira用户 # ...
- Error:(4, 13) java: -source 1.5 中不支持默认方法 (请使用 -source 8 或更高版本以启用默认方法)
- 5-4 Sentinel 限流_流控与降级
Sentinel 介绍 什么是Sentinel Sentinel也是Spring Cloud Alibaba的组件 Sentinel英文翻译"哨兵\门卫" 随着微服务的流行,服务和 ...
- Android多版本flavor配置之资源文件和清单文件合并介绍
知识背景 Android studio升级到3.0之后,gradle增加了多维度管理配置,便于同一个项目中创建应用的不同版本,分别管理依赖项并签署配置.创建产品风味与创建构建类型类似:只需将它们添加到 ...