目录：
（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组件点击确定的按钮：调用这个方法更新数据
点击确定，更新了数据库，主页组件也同时更新
