Vue3-黑马（十三）

目录：

（1）vue3-router-动态路由3

（2）vue3-进阶router-动态菜单

（3）vue3-进阶-router-令牌-获取用户信息

---

（1）vue3-router-动态路由3

登录页面后，如果点击了刷新，所有的路由就会重置了，因为js代码重新执行，所有的状态都恢复到最初的状态了，新添加的路由都不存在了，怎么解决呢？我们可以把这些路由信息存储到声明周期更长的位置，比如说我们之前讲的localStorage或SessionStorage中

 

 

添加存储路由的代码 

 

 未登录：

登录后：更新了 

 当页面刷新后：

添加存储的代码：

重置路由，在Storage中删除路由信息 

 

 

此时在刷新页面数据就不会丢失 

 

 （2）vue3-进阶router-动态菜单

菜单的数据也有刷新问题： 

定义存储菜单的数据

登录组件导入：

 

 添加存储菜单的代码

 在主页：

 

 

 

（3）vue3-进阶-router-令牌-获取用户信息

当用户登录后会返回一个令牌，那么令牌有什么用呢？

可以获取用户的信息 

服务端在生成令牌的时候，戴上了用户名的信息，客户端可以直接解析获取，当然服务端可以在令牌中加其他的信息

 令牌  ：第一部分是header，第二部分是令牌的负载，第三部分是令牌的签名

第二部分包含了用户的信息可以使用atob函数可以解析base64的编码的

 

 

 

当登录之后跳转到主页，在主页显示用户名的信息

当登录之后获取到tocken信息，进行解析后把用户信息，存入到LocalStorage中，登录后在从LocalStorage里面获取 

在路由中添加定义变量

 

 在登录页面引入：

 

 在主页面：

 

 

 在路由中重置的时候需要重置：

、

清理： 登录成功清理，进入登录页面清理

 

 

 

后退到登录页面 ，清空哪些信息