Vue3-黑马（十四）

目录：

（1）vue3-进阶-router-令牌-前端路由

（2）vue3-进阶-router-令牌-前端路由

（3）vue3-进阶-pinia1

（4）vue3-进阶-pinia2

---

（1）vue3-进阶-router-令牌-前端路由

下面我们来看tocken的第二个用途， 作为前端路由的跳转依据

我们想要实现这样一个，当没有登录后是不能访问主页的信息，没有登录要跳到登录页面，我们在跳转主页之前做一个检查判断是否含有tocken，有tocken放行，没有tocken调回登录页面

在路由中添加代码，在每次跳转路由前进行执行这个函数：beforeEach

访问主页： 

 

 调回登录页面

 我们vue的页面单页面程序，不管你的组件有多少，它最外层的html页面只要一个index.html:

 

其他组件在这个页面的中的title显示时一样的。

用一个函数afterEach用解决页面标题一样的问题 ，路由跳转之后执行

 

（2）vue3-进阶-router-令牌-前端路由

tocken的另外一个作用，是后端Api的访问依据，前端访问后端，需要前端的请求携带一个tocken，这个tocken用于身份的校验

 

前端访问请求需要携带tocken ，axios在请求拦截器中添加携带tocken

 导入当时存入的tocken变量

 

 发现登录获取菜单的请求携带了一个请求头，把获取的tocken请求发送给服务器，经过拦截器验证，验证成功才会返回正确信息

 

（3）vue3-进阶-pinia1

这样一个需求在登录成功后，在右上角不仅显示用户名还有真实姓名和性别，用户的基本信息 

在菜单一种可以修改当前登录的用户信息，更新数据库，修改成功后在主页组件右上角也要同时更新，但是你会发现这是两个组件，外面那个主页组件是不会变化的，这是遇到的问题，怎么解决呢？需要一个新的技术pinia，可以针对多个组件之间实现数据的共享，这个数据是响应式的数据 

 那么象使用LocalStorage不行吗？把菜单数据存入localStorage，因为登录成功后把数据存入localStorage后进行页面的跳转，跳转后进入主页面，当页面加载时可以在从LocalStorage中获取，但是修改页面信息没有实现页面跳转所以是不行的，不会主动触发读取locaStorage，除非加一个按钮触发代码来读取更新后的信息

pinia就想vuex一样实现不同组件的数据共享问题

首先安装

 

在main.ts引入pinia

 创建文件夹：存放数据共享的数据

 先定义一个固定的共享数据：

在主页引入：使用这个共享数据

 

 

P1组件使用这个共享数据

 

使用Mounted函数，通过Object.assign进行对象的赋值，因为上面的表单对象已经跟dto对象绑定了，直接把共享数据跟dto对象进行赋值 

为什么共享数据userInfo直接跟表单进行绑定呢？因为如果进行了绑定，当在这个页面修改时，右上角就会立马改动，用不到下方的确定按钮啦

 

 在P1这个组件中更新数据保存到共享数据中

修改一下内容： 

 点击确定：

 

 （4）vue3-进阶-pinia2

 useRequest一般用到组件里

 

 

 

 我们用的是vue的component组合式API，见不到this

在主页面：调用这个方法

 

 在P1组件点击确定的按钮：调用这个方法更新数据

 

 点击确定，更新了数据库，主页组件也同时更新