一、什么是vue-router

vue-router是路由导航守卫，又叫路由的钩子函数或者路由的生命周期函数。
就是路由从开始进入路径到跳转结束这个过程中，到了某个阶段会自动执行的函数。

原理：
路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。

路由的两种模式：

hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取;

特点：

hash虽然在URL中，但不被包括在HTTP请求中；
用来指导浏览器动作，对服务端安全无用，
hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

特点：

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如地址后加上/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

二、路由的鉴权

1、通过vue-router addRoutes 方法注入路由实现控制

通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式）。
通过调用 this.$router.addRoutes方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。
addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！

2、通过vue-router beforeEach 钩子限制路由跳转

通过请求服务端获取当前用户路由配置，通过注册 router.beforeEach钩子对路由的每次跳转进行管理。
每次跳转都进行检查，如果目标路由不存在于当前路由中，取消跳转，转为跳转错误页。

方法1和方法2的区别是：方法1是自动的，方法2是手动的。

三、路由守卫

作用：守卫页面跳转监听页面跳转在页面跳转前或者跳转后执行一些操作。路由在跳转时的一些验证，列如登录鉴权，在项目里没有登录时不能跳转至个人中心页面。

全局守卫

位置：写在router.js中，设置全局的所有的页面。

router.beforeEach ：全局前置守卫，进入路由之前。

router.beforeResolve ：全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用。在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

router.afterEach ：全局后置钩子，进入路由之后。
使用：

router.afterEach((to, from) => {// ...
})

组件内的守卫

位置：在要守卫的单个组件内的，js里面，与data、methods同级。

beforeRouteEnter：路由进入前。
不能获取组件实例 this，因为当守卫执行前，组件实例还没被创建。
但是可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
例如：

beforeRouteEnter (to, from, next) {next(vm => {// 通过 `vm` 访问组件实例})
}

beforeRouteUpdata(2.2新增)：在当前路由改变，但是该组件被复用时调用。
举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

beforeRouteLeave：导航离开该组件的对应路由时调用。可以访问组件实例 this。
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
例如：

beforeRouteLeave (to, from, next) {const answer = window.confirm('Do you really want to leave? you have unsaved changes!')if (answer) {next()  //如果answer存在，则执行下一步} else {next(false)  //不存在就中断当前的导航}
}

单个路由的守卫

位置：在路由配置中，在想守卫的路由配置里。

beforeEnter：路由进入前。

使用方法：

const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}]
})

所有守卫的参数

注意：afterEach（）没有next这个参数

每个守卫方法接收三个参数：

to：即将要进入的目标路由对象
from：当前导航正要离开的路由
next：是否进行下一步。一定要调用该方法来结束这个钩子函数。执行效果依赖 next 方法的调用参数。
- next（）：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
- next(false)：中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- next('/')：或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
- next(error)： (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

vue-router的鉴权、守卫相关推荐

vue router 路由鉴权（非动态路由）
概述角色:超级管理员.主题管理员.数据服务管理员权限: 超级管理员:所有页面主题管理员:基础公共页面+主题设置页数据服务管理员:基础公共页面+数据服务设置页+数据服务审批页需求:角色菜单来自 ...
Vue Router 组件内的守卫、导航解析流程
可以在路由组件内直接定义路由导航守卫(传递给路由配置的) 可用的配置 API beforeRouteEnter 在渲染该组件的对应路由被验证前调用. 此时不能获取组件实例 this , 因为当守卫执行 ...
vue 配合钉钉鉴权及钉钉 API 使用方法
1.项目安装 dingtalk-jsapi ,命令如下: npm install dingtalk-jsapi --save 2.在需要的位置引入使用: import * as dd from 'di ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
SpringCloud-Gateway网关统一登录鉴权+QQ第三方登录+Vue前后分离解决方案
具体流程 * 网关鉴权流程:* 前端输入用户名密码去请求token,经过SecurityWeb配置,* 白名单不进入AuthorizationManager,直接进全局过滤器->没有token放 ...
react路由鉴权 / 路由守卫
react路由鉴权 / 路由守卫首先路由鉴权就是在访问一个页面时判断是否需要权限,比如电商App结算账单的时候需要登录用户的账号路由守卫就是在该页面需要登录用户的情况下去判断是否登录总的来说就是 ...
react路由鉴权 / 路由守卫（常用经实践可行推荐阅读）
react路由鉴权 / 路由守卫首先路由鉴权就是在访问一个页面时判断是否需要权限,比如电商App结算账单的时候需要登录用户的账号路由守卫就是在该页面需要登录用户的情况下去判断是否登录总的来说就是 ...
实战美团Nuxt +Vue全家桶，服务端渲染，邮箱验证，passport鉴权服务，地图API引用，mongodb，redis等技术点
koa koa-generator 直接创建koa项目,不需要自己配置全局安装 npm i -g koa-generator 创建项目 koa2 -e project 其中-e 表示以ejs为模板 ...
VUE ssr cookie 及鉴权
这篇文章基于vue ssr官方教程,如果您没看过,可能觉得内容有点莫名其妙,如果您看过的话,应当知道我在说什么. 由于文档里没有cookie相关的内容,也没有更进一步的讲鉴权,所以我结合网上的一些文章 ...

vue-router的鉴权、守卫