好家伙,考完期末考了.

恢复博客更新

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

Token的定义:Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,
当第一次登录后,服务器生成一个Token便将此Token返回给客户端,
以后客户端只需带上这个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的导航守卫的更多相关文章

  1. 第十五篇 Integration Services:SSIS参数

    本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...

  2. 【译】第十五篇 Integration Services:SSIS参数

    本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...

  3. 解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里?(译)

    解剖SQLSERVER 第十五篇  SQLSERVER存储过程的源文本存放在哪里?(译) http://improve.dk/where-does-sql-server-store-the-sourc ...

  4. Python之路【第十五篇】:Web框架

    Python之路[第十五篇]:Web框架   Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...

  5. “全栈2019”Java第九十五章:方法中可以定义静态局部内部类吗?

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. 跟我学SpringCloud | 第十五篇:微服务利剑之APM平台(一)Skywalking

    目录 SpringCloud系列教程 | 第十五篇:微服务利剑之APM平台(一)Skywalking 1. Skywalking概述 2. Skywalking主要功能 3. Skywalking主要 ...

  7. Egret入门学习日记 --- 第十五篇(书中 6.1~6.9节 内容)

    第十五篇(书中 6.1~6.9节 内容) 好的,昨天完成了第五章. 今天来看第六章. 总结重点: 1.如何对组件进行分组? 跟着做: 重点1:如何对组件进行分组? 首先,选中你想要组合的组件. 然后点 ...

  8. Vue Router的导航解析过程

    在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步. 12步如下: 导航被触发. 在失活的组件里调用离开守卫beforeRouteLeave . 调用全局的 befo ...

  9. 淘宝(阿里百川)手机客户端开发日记第十五篇 JSON解析(四)

    解析一个从淘宝传递的JSON (大家如有兴趣可以测试下):{ "tae_item_detail_get_response": { "data": { " ...

随机推荐

  1. 想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!

    从Vue3发布以来,我就一直对其非常感兴趣,就一直想着将其投入公司的生产中,但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试:慢慢的发现组合式Api的形式非常适合开发(个人感觉),尤其是V ...

  2. 你要的几个JS实用工具函数(持续更新)

    今天,我们来总结下我们平常使用的工具函数,希望对大家有用.1.封装fetch 源码: /** * 封装fetch函数,用Promise做回调 * @type {{get: (function(*=)) ...

  3. XAMPP Apache安装时问题总结

    昨天遇到的一个问题,安装XAMPP后无法启动Apache服务,本以为可能是一些系统服务文件被占用的原因,安装软件后需重启一遍.可是重启计算机后依然无法启动Apache服务,状态栏里总是显示" ...

  4. C#中List实体类转换为object 并把参数返回到前端

    用ConvertAll方法转换: List<Object> m= list.ConvertAll(s=> (object)s); 返回的结果:

  5. 013(oulipo)

    题目:http://ybt.ssoier.cn:8088/problem_show.php?pid=1455 题目描述:在母串里找子串出现的次数 题目思路:与字符串的搜索有关那就立刻找到哈希 从s[1 ...

  6. Node.js精进(9)——性能监控(上)

    市面上成熟的 Node.js 性能监控系统,监控的指标有很多. 以开源的 Easy-Monitor 为例,在系统监控一栏中,指标包括内存.CPU.GC.进程.磁盘等. 这些系统能全方位的监控着应用的一 ...

  7. 今天介绍一下自己的开源项目,一款以spring cloud alibaba为核心的微服务架构项目,为给企业与个人提供一个零开发基础的微服务架构。

    LaoCat-Spring-Cloud-Scaffold 一款以spring cloud alibab 为核心的微服务框架,主要目标为了提升自己的相关技术,也为了给企业与个人提供一个零开发基础的微服务 ...

  8. 【docker专栏5】详解docker镜像管理命令

    一.国内Docker镜像仓库 由于大家都知道的原因,从国外的docker 仓库中pull镜像的下载速度实际上是很慢的.国内的一些一线厂商以及docker官方都在国内免费提供了一些docker镜像仓库, ...

  9. yum-config-manager: command not found

    yum-config-manager: command not found ,这个是因为系统默认没有安装这个命令,这个命令在yum-utils 包里,可以通过命令yum -y install yum- ...

  10. ooday03 Java_引用类型数组_继承_super_向上造型

    引用类型数组: 点击查看代码 1)Bomb[] bs = new Bomb[3]; bs[0] = new Bomb(100,200); bs[1] = new Bomb(200,300); bs[2 ...