当前位置:首页 » 《我的小黑屋》 » 正文

登录前端笔记(二):vuex管理用户数据;跨域;axios封装;环境;请求响应拦截;权限;用户资料Vuex共享

18 人参与  2024年10月31日 13:20  分类 : 《我的小黑屋》  评论

点击全文阅读


一、Vuex登录流程之用户模块:

在这里插入图片描述

简言之:点击登录调用actions且得到token,把得到的token提交给mutations从而修改state里的数据。
原视频

(1)Vuex用户模块流程

组件页面里点击登录后,调用stores里的actions,actions里调用登录接口成功后返回一个token值,使用vuex实现一个token数据多处共享(token数据先在state里声明数据初始化;然后vuex修改state里数据通过mutations里去声明一个方法setToken修改token,然后actions里调用登录接口后是要返回一个token假设值为123,此时调用setToken方法context.commit(‘setToken【也就是mutations的名字】’, ‘123【也就是token值】’)
在这里插入图片描述

(2)Vuex持久化问题:

页面刷新后token值又变为null(数据未被存储)
解决:设置token时同步到缓存里,然后从缓存里读取token初始值。(Vuex:state里从缓存中读取token初始值,mutations里同步token到缓存里)
获取、设置、删除token方法(类似localStorage都可以前端缓存数据)
在这里插入图片描述
在这里插入图片描述

二、Vuex登录流程之调用登录接口

在这里插入图片描述

(1)跨域

简言之,直接发送请求时跨域行为,会受到同源策略影响就会报错。所以直接发送请求要么后端做cors,要么前端做代理。此处为代理。
①浏览器同源策略:协议+主机+端口都一样
在这里插入图片描述
通过node向目标服务器发送请求,而同源策略只针对浏览器对浏览器之间,而node是服务器。
在这里插入图片描述
②配置vue-cli代理解决跨域问题
在这里插入图片描述

proxy的path地址为"/api":意思是发送的请求里只要携带/api就会把请求转为目标服务器,对象为目标服务器所存储的内容。属性target为代理的目标服务器地址;改完文件重启项目。
在这里插入图片描述
http://localhost:9528是axios会自动给url拼接上;因为代理配置了target内容所以会给url拼接target内容。
在这里插入图片描述

(2)axios封装

在这里插入图片描述
(1)基地址、超时时间
baseURL:基地址,axios设置一个基地址/api,其余请求可以不用再拼接这个地址/api;
在这里插入图片描述

timeout:超时时间,如果服务器在超时时间内没有响应,直接认定此次请求失败;
在这里插入图片描述

(2)请求
在这里插入图片描述

1)请求拦截器:注入token
把所有token都放在请求拦截器里去统一管理,这样每个请求都不需要再次传入token;
登录之后所有请求经过请求拦截器后都会携带token;

在这里插入图片描述

①axios里取token:用户模块部分,在stores里下的user即用户模块里管理token且持久化了token;所以可通过state.user.token获取token;
在这里插入图片描述
但stores里的getters可快速访问stores下modules里的app 与settings与 user里的属性;
在这里插入图片描述
所以直接getters.token,所以需要在axios里取到getters
在这里插入图片描述
不可以this.$stores.getters,因为this只可以在组件里的时候使用,this指的是组件实例,组件实例上挂载了$stores属性,但此时this不是组件实例是axios实例;

store 下的 index 文件将store进行export default 即实例是组件的里的this.$stores ,不用this直接引用store也可以使用:store.getters.token
在这里插入图片描述
在这里插入图片描述
请求头
在这里插入图片描述
测试:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2)响应拦截器:是否成功
response有两个参数,一个成功一个失败;
①响应失败
失败的时候需要reject并且提示信息,return Promise.reject(err)终止错误;
error对象里提供了message属性即是错误信息,可以通过alert提示,但现在在使用elementUI ,它有一个message来提示信息;
在这里插入图片描述
不可以直接使用this.$message.warning,因为在组件里面this指的是组件实例,实例上挂载了$message,但此时this是axios实例;
用引用的方式解决,因为本身项目已经装elementUI,此时引用Message进来,它会按需去导出Message方法,此时的Message等同于this.$message
在这里插入图片描述
②响应成功
解构赋值:data、message、success
错误执行里才有error对象,此处没有所以new一个错误对象,错误对象提示信息就是message
在这里插入图片描述

在这里插入图片描述

(3)环境区分

原视频
在这里插入图片描述
①开发环境
在这里插入图片描述
②生产环境
npm run build:prod
在这里插入图片描述
在这里插入图片描述

(4)请求模块

在这里插入图片描述
封装请求模块
一定要return request因为会返回promise;
await写了一定要有async;
await代表一定会成功,失败时不需要考虑因为axios封装时有错误提示信息;
在这里插入图片描述
因为返回的promise是异步的,所以需要await代表一定是promise执行成功了(失败在axios里已经处理过),然后才能去跳转主页
在这里插入图片描述
判断是否是开发环境,是的话填手机号密码反之没有;
在这里插入图片描述

在这里插入图片描述

三、主页权限认证

在这里插入图片描述
(1)进度条
在这里插入图片描述
在这里插入图片描述
(2)如果有token
如果next里有地址不会执行后置守卫,需要手动关闭;
如果next里没有地址会执行后置守卫;
在这里插入图片描述

(3)如果没有token
白名单就是不需要token也可以访问的页面(whiteList);
在这里插入图片描述
总结
在这里插入图片描述

四、用户资料Vuex共享

原视频
在这里插入图片描述
①有token情况下调用action

在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/180474.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1