asp 退出登录修改cookie能进入后台_vue项目登录鉴权+动态路由

流程图

这里用token进行鉴权主要是防止crsf攻击，crsf攻击简要介绍一下

跨站脚本伪造，就是在登录安全网站之后诱导用户点击危险网站，那么危险网站就可以得到用户的cookie从而冒充用户身份对安全网站进行访问和一些违法操作。那么关键点就在于

• 登录受信任站点 A，并在本地生成cookie；
• 在不登出站点A（清除站点A的cookie）的情况下，访问恶意站点B。

所以防范的方法之一是用不能截取的token。

那这里用token进行验证，分为token存在和token不存在的情况

路由守卫的三个参数如下

需要注意的是：next（）含参的话会在跳转之后再次出发拦截器钩子，而无参数的时候不会再次触发，但是拦截器一定要触发next（）才能resolve，所以如果无token登录的话不能直接next（'/login'）,这里的做法呢是创建一个白名单路由，也就是类似于访客模式，只有少数路由如登录路由是可以访问到的

indexof（）用法如下，区分大小写

如果token存在并且没有异常的话，那么进入页面后会通过角色分配对应的路由，这里一般是后台返回该角色对应的路由

vue-router通过meta里面自定义值来分配路由，结构如下

如果角色是超管的话直接用所有路由就行

数组includes（）的用法

否则就有对动态路由进行过滤，这里每一个用户都能访问默认路由，默认动态路由就是所有根据角色不同而动态分配的路由

当得到后台返回的角色数组时，对默认动态路由进行过滤，用filter函数，如果动态路由里面有后台返回的角色就留下来，如果是含有children的嵌套路由则再调用同样的方法一次就可，如果嵌套路由过多，可以用递归处理。

数组的some函数只要有符合的值就返回true

说一下这里的token因为服务器代码的原因，所以token的值是放在cookie里传回来的，如下图，

每一次请求的时在headers里面带上token的参数，这里在请求拦截器里写上

改好之后还要更新路由，这里更新路由要注意两个地方都要更新，否则获取不到正确的路由

比如说这里只用了addroutes添加路由但是现在打印路由的话

这里只用四个路由

而手动注入之后才是正确的能访问到的七个路由

然后我又发现既然这样是不是这要更新option就行了呢？于是我又删掉了addroutes，然后我就发现了

所有这两个都要写上去才是正确的，至于原理之后再补充