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