一种已定的规则，用于生成token令牌，里面包含用户信息
jwt生成的字符串包含三部分
- jwt头信息
- 有效载荷，包含主体信息
- 签名哈希：字符串的一个防伪标志
使用方法
引入依赖
<!-- JWT--> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> </dependency>
导入jwt工具类JwtUtils
MD5加密
md5是一种加密技术，它是不可逆的，只能加密不能解密
登陆实现流程
后端
service
@Service public class UcenterMemberServiceImpl extends ServiceImpl<UcenterMemberMapper, UcenterMember> implements UcenterMemberService { @Autowired private RedisTemplate<String,String> redisTemplate; public static final String DEFAULT_AVATOR = "https://typora-images-1307135242.cos.ap-beijing.myqcloud.com/images/image-20230516110501589.png"; @Override public String login(LoginVO loginVO) { //获取登陆的手机号和密码 String mobile = loginVO.getMobile(); String password = MD5.encrypt(loginVO.getPassword()); if (StringUtils.isEmpty(mobile)|| StringUtils.isEmpty(password))throw new GuliException(20001,"登陆失败"); //判断手机号是否正确 LambdaQueryWrapper<UcenterMember> lambdaQueryWrapper = new LambdaQueryWrapper<>(); lambdaQueryWrapper.eq(UcenterMember::getMobile,mobile); UcenterMember dbMember = baseMapper.selectOne(lambdaQueryWrapper); if (dbMember == null) throw new GuliException(20001,"改手机号还未注册，请先注册"); if (dbMember.getIsDisabled() == 1)throw new GuliException(20001,"账户被禁用不能的登陆"); if (!password.equals(dbMember.getPassword()))throw new GuliException(20001,"密码不正确"); //登陆成功 String token = JwtUtils.getJwtToken(dbMember.getId(), dbMember.getMobile()); return token; }
controller
@Autowired private UcenterMemberService memberService; //登陆 @PostMapping("login") public R loginUser(@RequestBody LoginVO loginVO){ //调用service方法实现登陆 //返回一个token使用jwt生成 String token = memberService.login(loginVO); return R.ok().data("token",token); }
前端
安装
npm install --save js-cookie
配置request 给每个请求加入过滤器，也就是说每次前端向后端发送请求必须携带token，没有token就是没有登陆，可以将其跳转到登陆界面
import axios from 'axios' import cookie from 'js-cookie' // 创建axios实例 const service = axios.create({ baseURL: 'http://localhost:9001', // api的base_url timeout: 20000 // 请求超时时间 }) // http request 拦截器 service.interceptors.request.use( config => { // debugger if (cookie.get('guli_token')) { config.headers['token'] = cookie.get('guli_token') } return config }, err => { return Promise.reject(err) })
login.js
import request from '@/utils/request' export default { // 登录 submitLogin(userInfo) { return request({ url: `/ucenterservice/ucenterMember/login`, method: 'post', data: userInfo }) }, // 根据token获取用户信息 getLoginInfo() { return request({ url: `/ucenterservice/ucenterMember/getMemberInfo`, method: 'get' // headers: { 'token': cookie.get('guli_token') } }) // headers: {'token': cookie.get('guli_token')} } }
调用
submitLogin() { loginApi.submitLogin(this.user).then(response => { if (response.data.success) { // 把token存在cookie中、也可以放在localStorage中 cookie.set('guli_token', response.data.data.token, { domain: 'localhost' }) // 登录成功根据token获取用户信息 loginApi.getLoginInfo().then(response => { this.loginInfo = response.data.data.userInfo // 将用户信息记录cookie cookie.set('guli_ucenter', JSON.stringify(this.loginInfo), { domain: 'localhost' }) // 跳转页面 window.location.href = '/' }) } }) },
