Vue3-黑马(十四)

目录:

(1)vue3-进阶-router-令牌-前端路由

(2)vue3-进阶-router-令牌-前端路由

(3)vue3-进阶-pinia1

(4)vue3-进阶-pinia2


(1)vue3-进阶-router-令牌-前端路由

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

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

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

Vue3-黑马(十四)_第1张图片

访问主页: 

 Vue3-黑马(十四)_第2张图片

 调回登录页面

Vue3-黑马(十四)_第3张图片

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

Vue3-黑马(十四)_第4张图片

Vue3-黑马(十四)_第5张图片 

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

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

Vue3-黑马(十四)_第6张图片

 Vue3-黑马(十四)_第7张图片

(2)vue3-进阶-router-令牌-前端路由

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

Vue3-黑马(十四)_第8张图片

Vue3-黑马(十四)_第9张图片 

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

 导入当时存入的tocken变量Vue3-黑马(十四)_第10张图片

 Vue3-黑马(十四)_第11张图片

 发现登录获取菜单的请求携带了一个请求头,把获取的tocken请求发送给服务器,经过拦截器验证,验证成功才会返回正确信息Vue3-黑马(十四)_第12张图片

 

(3)vue3-进阶-pinia1

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

Vue3-黑马(十四)_第13张图片

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

Vue3-黑马(十四)_第14张图片

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

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

首先安装

 

Vue3-黑马(十四)_第15张图片

在main.ts引入pinia

Vue3-黑马(十四)_第16张图片

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

Vue3-黑马(十四)_第17张图片

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

Vue3-黑马(十四)_第18张图片

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

Vue3-黑马(十四)_第19张图片 

 Vue3-黑马(十四)_第20张图片

P1组件使用这个共享数据

 Vue3-黑马(十四)_第21张图片

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

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

Vue3-黑马(十四)_第22张图片 

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

Vue3-黑马(十四)_第23张图片

修改一下内容: 

Vue3-黑马(十四)_第24张图片 点击确定:

Vue3-黑马(十四)_第25张图片

 

 (4)vue3-进阶-pinia2

 useRequest一般用到组件里

Vue3-黑马(十四)_第26张图片

Vue3-黑马(十四)_第27张图片

 

Vue3-黑马(十四)_第28张图片 

 

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

在主页面:调用这个方法

Vue3-黑马(十四)_第29张图片

 

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

Vue3-黑马(十四)_第30张图片

Vue3-黑马(十四)_第31张图片 

 点击确定,更新了数据库,主页组件也同时更新Vue3-黑马(十四)_第32张图片

 

 

你可能感兴趣的:(#,Vue总结,前端,vue.js,javascript)