该文章主要是为了整理之前学习项目中的知识点,并进行一定程度的理解。
首先打开前端登录页面,F12进行网页URL抓取:
随便输入信息,查看请求后端的地址:
地址:
请求 URL: http://localhost:8888/login
请求方法: POST
状态代码: 200
远程地址: [::1]:8888
引用站点策略: strict-origin-when-cross-origin
很明显,前端用户输入账户,通过post请求传递给后端接收:
@RequestMapping("/login")
public class LoginController {
@Autowired
private LoginService loginService;
@PostMapping
public Result login(@RequestBody LoginParam loginParam){
return loginService.login(loginParam);
}
}
这里为了方便传输,把前端参数封装成对象传入.
后端验证查询账户的逻辑操作:
String pwd = DigestUtils.md5Hex(password + salt);
//根据账号和加密的密码进行数据库的查找
SysUser sysUser = sysUserService.findUser(account, pwd);
{
"code": 200,
"success": true,
"msg": "success",
"data": "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzQ4OTY1MDIsInVzZXJJZCI6MSwiaWF0IjoxNjM0MDA3NDcwfQ.9elJSiGa-QARLqKGLTeFW9go7ujsArd0QV_HihHfEm0"
}
这里就实现了JWT和redis实现简单的登录验证功能。
前端请求:
前端传递账户名、密码、昵称,调用http://localhost:8888/register地址进行post传参,后端接收参数
将生成得token传递给前端:
{
"code": 200,
"success": true,
"msg": "success",
"data": "eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzQ4NDc0MzQsInVzZXJJZCI6MTQ0NzU1MjU3MDYzMDQzNDgxNywiaWF0IjoxNjMzOTU4NDAxfQ.zn5meG_lUWROuz7TmkUGS0MTjO1-TDQa42uM_-uhXqs"
}
前端调用该接口,:
http://localhost:8888/users/currentUser
前端将获得token传递给后端接口currentUser,在redis中找到user信息,校验信息,解析数据,返回用户基本信息,前端解析
前端index.js部分代码段:
login({commit}, user) {
return new Promise((resolve, reject) => {
login(user.account, user.password).then(data => {
if(data.success){
commit('SET_TOKEN', data.data)
setToken(data.data)
resolve()
}else{
reject(data.msg)
}
}).catch(error => {
reject(error)
})
})
到这里就是简单的登录注册的功能,上述内容都是部分代码段,如果有需要学习的可以评论留言。
【码神之路】博客开发;
如果你看到这里或者正好对你有所帮助,希望能点个或者⭐感谢;
有错误的地方,欢迎在评论指出,作者看到会进行修改。
原文链接:https://www.cnblogs.com/xbhog/p/15397167.html
页面更新:2024-05-15
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号