6.vue3项目（六）：登录登出功能：登录后获取token，登出实现，进度条效果，路由鉴权，真实接口替换mock接口

目录

一、登录后获取token，根据token获取用户信息，并将用户头像姓名回写页面

1.用户小仓库出参类型中添加名称、头像

2.用户小仓库中添加查询用户方法

3. 在发起请求的时候将token带在请求头上

4.将数据回显在主体内容中

5.将数据回显在顶部导航右侧

6.测试结果

二、退出登录的实现

1.思路分析

2.token工具类写一个情况token的方法

3.用户小仓库写一个登出的方法

4.点击登出按钮调用登出

5.登录的时候校验是回到首页还是上次退出的页面

三、点击任意路由会有进度条效果

1.思路分析

2.安装nprogress

3.新建路由鉴权文件，在里面设置全局守卫

4.在main中引入路由鉴权

5.自定义进度条样式

6.效果测试

四、 路由鉴权

1.思路分析

2.查询用户方法设置成功失败的返回结果

3.路由鉴权

4.清除layout中左侧菜单的伸缩样式

5.清除home组件中查询用户信息内容

五、真实接口替换mock接口

1.使用测试地址

2.更改配置文件的地址配置

3.配置代理跨域

4.修改用户接口的出入参对象，以及接口本身

5.用户小仓库调用接口变更

6.调用login接口的地方修改

7.调用查看用户信息的地方变更

8.调用logout的地方变更

六、感谢支持

---

一、登录后获取token，根据token获取用户信息，并将用户头像姓名回写页面

我们在登录页面点击登录，会先拿到token，然后通过token拿到用户信息，再将用户信息回显到页面上。

功能分析：

• 首先我们需要一个查看用户信息的接口，我们的做法是把这个方法做在用户小仓库中，通过调用这个接口拿到用户名称、头像。因此需要先在小仓库类型中添加名称、头像的出参类型
• 定义好出参类型后将他们放在用户小仓库的出参中，并在小仓库中做好接口的调用
• 但是调用的时候是需要带着token的，不然不知道是调用哪个用户的信息，而后续所有的接口其实都需要token，因此我们将token放在发起请求