登录/退出功能

1. 登录业务流程&＃xff1a;

1. 在登录页面输入用户名和密码
2. 调用后台接口进行验证
3. 通过身份验证&＃xff0c;跳转到项目主页

2. 登录状态保持:

HTTP是无状态协议。所谓无状态是指协议对于事务处理没有记忆功能&＃xff0c;对于同一个URL请求没有上下文关系&＃xff0c;每次的请求都是独立的&＃xff0c;服务器没有保存客户端的状态。可以通过COOKIE、session和token来保持用户状态。

1. 如果服务器和客户端同源&＃xff0c;使用COOKIE或session保持登录状态。COOKIE在客户端记录状态&＃xff0c;session在服务器端记录状态。
2. 如果服务器和客户端跨域&＃xff0c;使用token来维护登录状态

3. 登录原理分析&＃xff08;token&＃xff09;:

用户在登录页面输入账号和密码&＃xff0c;客户端将输入的数据发送给服务器&＃xff0c;服务器返回登录结果&＃xff0c;登录成功返回带有token的数据&＃xff0c;客户端得到token并保存&＃xff0c;后续的请求都需要带上这个token发送给服务器&＃xff0c;服务器会验证token以保证用户身份。

(1). 登录代码&＃xff1a;

login(){this.$refs.loginFormRef.validate(async valid&＃61;>{if(!valid){return;}const {data: res} &＃61; await this.$http.post(&＃39;login&＃39;,this.loginForm);console.log({data: res});if(res.meta.status !&＃61;&＃61; 200){return this.$message.error(&＃39;登录失败&＃xff01;&＃39;)}this.$message.success(&＃39;登陆成功&＃39;)// 1.登陆成功后的token&＃xff0c;保存到客户端的sessionStrorage中// 1.1 项目中除了登录之外的其他API接口&＃xff0c;必须在登录之后才能访问// 1.2 token只在网页打开期间生效&＃xff0c;所以将token保存在sessionStrorage中window.sessionStorage.setItem(&＃39;token&＃39;,res.data.token)// 2.通过编程式导航跳到后台主页this.$router.push(&＃39;/home&＃39;)})}


4. 退出登录:

销毁本地token即可&＃xff1a;

logout() {// 销毁tokenwindow.sessionStorage.clear()this.$router.push(&＃39;/login&＃39;)},