token代码演示
vue前端
1、页面组件
数据绑定——账号和密码
事件触发——登录
<el-form-item prop="username">
<el-input placeholder="请输入账号" prefix-icon="el-icon-user" size="medium" v-model="admin.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input placeholder="请输入密码" show-password prefix-icon="el-icon-lock" size="medium" v-model="admin.password" ></el-input>
</el-form-item>
<el-form-item>
<el-button style="width: 100%" size="medium" type="primary" @keyup.enter="keyDown" @click="login" >登录</el-button>
</el-form-item>
2、Js
data
data() {
return {
loginAdmin: {},
admin: {username : "junli" , password: "123456"},//设置默认的账号密码用于测试使用
}
}
点击”登录“的触发函数
login() {
this.$refs['loginForm'].validate((valid) => {
if (valid) {
request.post('/admin/login', this.admin).then(res => {
if (res.code === '200') {
this.loginAdmin = res.data;
this.onSuccess();
} else {
this.$notify.error(res.msg)
}
})
}
})
},
如下:此时loginAdmind已经从后端获取到数据。(控制台打印)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WBDaiACE-1685703375038)(C:\Users\沈礼谦\AppData\Roaming\Typora\typora-user-images\image-20230602180923653.png)]
Springboot后端
control层(调用adminService.login,把 ”实例login“ 返回给前端)
url:”/admin/login“
@ApiOperation("登录方法")
@PostMapping("/login")
public Result login(@RequestBody LoginRequest request) {
LoginDTO login = adminService.login(request);
return Result.success(login);
}
service层(验证账号密码,生成token,返回一个LoginDTO类的实例)
@Override
public LoginDTO login(LoginRequest request) {
Admin admin = null;
try {
admin = adminMapper.getByUsername(request.getUsername());
} catch (Exception e) {
log.error("根据用户名{} 查询出错", request.getUsername());
throw new ServiceException("用户名错误");
}
if (admin == null) {
throw new ServiceException("用户名或密码错误");
}
// 判断密码是否合法
String securePass = securePass(request.getPassword());
if (!securePass.equals(admin.getPassword())) {
throw new ServiceException("用户名或密码错误");
}
LoginDTO loginDTO = new LoginDTO();
BeanUtils.copyProperties(admin, loginDTO);
// 生成token,设置token
String token = TokenUtils.genToken(String.valueOf(admin.getId()), admin.getPassword());
loginDTO.setToken(token);
//生成登录记录
SimpleDateFormat sdf= new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
loginMapper.save(new Login(admin.getUsername()+"登录", sdf.format(System.currentTimeMillis())));
return loginDTO;
}
vue前端
- 设置一个叫“admin”的浏览器cookie用于跟踪用户的会话状态,其value值为 JSON.stringify(this.loginAdmin)
- 提示登录成功,页面跳转。
onSuccess() { // 登录成功后触发的
Cookies.set('admin', JSON.stringify(this.loginAdmin))
this.$notify.success("登录成功")
this.$router.push('/')
}