谈谈登录注册的如何实现
谈谈对登录逻辑的理解*登录逻辑1、第一次登录的时候,前端(客户端)调后端(服务器)的登陆接口,并发送用户名和密码2、后端(服务器)收到(客户端)请求,验证用户名和密码,验证成功,就给前端(客户端)返回一个token3、前端(客户端)拿到token,将token存储到localStorage或vuex中,并跳转路由页面4、前端(客户端)每次跳转路由,就判断 localStroage 中有无 toke
谈谈对登录逻辑的理解*
登录逻辑
1、第一次登录的时候,前端(客户端)调后端(服务器)的登陆接口,并发送用户名和密码
2、后端(服务器)收到(客户端)请求,验证用户名和密码,验证成功,就给前端(客户端)返回一个token
3、前端(客户端)拿到token,将token存储到localStorage或vuex中,并跳转路由页面
4、前端(客户端)每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
5、在组件中每次调后端(服务器)接口,都要在请求头中加token
6、后端(服务器)判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401
7、如果前端(客户端)拿到状态码为401,就清除token信息并跳转到登录页面
在前端中,登录注册需要通过端口来获取数据并传递参数,并进行判断事件的执行获取得到的登录信息以及一个token值
token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,
它相当于数据的id,给与数据一个唯一的标识,它的出现主要目的是解决服务器频繁请求用户姓名以及密码的问题;
它的作用是减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。
// 请求登录接口并传递参数
this.$ClientAPI
.loginGetToken(obj)
.then((res) => {
console.log(res.data.data);
var token = res.data.data.remember_token; //读取token
var mobile = res.data.data.mobile;
localStorage.setItem("mobile", mobile);
localStorage.setItem("token", token); //保存token
localStorage.setItem("value", "admin");
Toast.success({
message: "登录成功",
position: "top",
});
this.$router.push("/mine"); //跳转到我的页面
})
.catch((err) => {
console.log(err);
Toast.fail({
message: "登录失败",
position: "top",
});
});
更多推荐
所有评论(0)