目录
后端（Spring Boot）
1. 创建用户实体和数据库表
2. 用户注册和登录接口
3. JWT Token生成
4. JWT Token验证
前端（Vue.js）
1. 用户界面
2. 发送登录请求
3. 接收并存储Token
4. 发送请求时携带Token
5. 路由守卫
注意事项
在Spring Boot和Vue.js中实现token认证登录是一种常见的前后端分离的认证机制。
以下是实现这一机制的基本步骤：
后端（Spring Boot）
1. 创建用户实体和数据库表
首先，你需要定义一个用户实体，比如User，并为其创建相应的数据库表。
@TableField(exist = false)
private String token; // 表示我们数据库没有这个字段，但是在前端我们需要返回这个字段2. 用户注册和登录接口
在Spring Boot应用中创建用于注册和登录的REST API。
@Override
public User login(UserPasswordDTO userPasswordDTO) {
User one = getUserInfo(userPasswordDTO);
if (one != null) {
BeanUtil.copyProperties(one, userPasswordDTO, true);
// 设置token
String token = TokenUtils.genToken(one.getId().toString(), one.getPassword());
one.setToken(token);
return one;
}else{
return null;
}
}
private User getUserInfo(UserPasswordDTO userPasswordDTO){
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("username", userPasswordDTO.getUsername());
queryWrapper.eq("password", SecureUtil.md5(userPasswordDTO.getPassword()));
List<User> one = userMapper.selectList(queryWrapper);
if (one.size()==0){
return null;
}
return one.get(0);
}3. JWT Token生成
用户登录成功后，生成一个JWT（JSON Web Token），并将其发送回客户端。
首先在pom.xml文件中导入jwt包：
<!-- JWT -->
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>3.10.3</version>
</dependency>在config包中新建TokenUtils类：
package com.lyk.xuelang.config;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.util.StrUtil;
import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;
import com.lyk.xuelang.entity.User;
import com.lyk.xuelang.mapper.UserMapper;
import org.springframework.stereotype.Component;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import javax.annotation.PostConstruct;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.Date;
@Component
public class TokenUtils {
private static UserMapper staticUserMapper;
@Resource
private UserMapper userMapper;
@PostConstruct
public void setUserService() {
staticUserMapper = userMapper;
}
/**
* 生成token
*
* @return
*/
public static String genToken(String userId, String sign) {
return JWT.create().withAudience(userId) // 将 user id 保存到 token 里面,作为载荷
.withExpiresAt(DateUtil.offsetHour(new Date(), 2)) // 2小时后token过期
.sign(Algorithm.HMAC256(sign)); // 以 password 作为 token 的密钥
}
/**
* 获取当前登录的用户信息
*
* @return user对象
*/
public static User getCurrentUser() {
try {
HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
String token = request.getHeader("token");
if (StrUtil.isNotBlank(token)) {
String userId = JWT.decode(token).getAudience().get(0);
return staticUserMapper.selectById(Integer.valueOf(userId));
}
} catch (Exception e) {
return null;
}
return null;
}
}
4. JWT Token验证
在config包下新建interceptor包，然后新建JwtInterceptor类：
package com.lyk.xuelang.config.interceptor;
import cn.hutool.core.util.StrUtil;
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.JWTDecodeException;
import com.auth0.jwt.exceptions.JWTVerificationException;
import com.lyk.xuelang.common.Constants;
import com.lyk.xuelang.entity.User;
import com.lyk.xuelang.exception.ServiceException;
import com.lyk.xuelang.service.IUserService;
import org.springframework.stereotype.Component;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Component
public class JwtInterceptor implements HandlerInterceptor {
@Resource
private IUserService userService;
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
String token = request.getHeader("token");
if(!(handler instanceof HandlerMethod)){
return true;
}
// 执行认证
if (StrUtil.isBlank(token)) {
throw new ServiceException(Constants.CODE_401, "无token验证失败");
}
// 获取 token 中的 userId
String userId;
try {
userId = JWT.decode(token).getAudience().get(0);
} catch (JWTDecodeException j) {
String errMsg = "token验证失败，请重新登录";
throw new ServiceException(Constants.CODE_401, errMsg);
}
// 根据token中的userid查询数据库
User user = userService.getById(userId);
if (user == null) {
throw new ServiceException(Constants.CODE_401, "用户不存在，请重新登录");
}
// 用户密码加签验证 token
JWTVerifier jwtVerifier = JWT.require(Algorithm.HMAC256(user.getPassword())).build();
try {
jwtVerifier.verify(token); // 验证token
} catch (JWTVerificationException e) {
throw new ServiceException(Constants.CODE_401, "token验证失败，请重新登录");
}
return true;
}
}
添加自定义拦截器
在config包下新建InterceptorConfig类：
package com.lyk.xuelang.config;
import com.lyk.xuelang.config.interceptor.JwtInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class InterceptorConfig implements WebMvcConfigurer {
@Override
// 加自定义拦截器JwtInterceptor，设置拦截规则
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(jwtInterceptorl())
.addPathPatterns("/**") //拦截所有请求，通过判断token是否合法来决定是否登录
.excludePathPatterns("/login","/role/page","/**/export","/**/import");//排除这些接口，也就是说，这些接口可以放行
}
@Bean
public JwtInterceptor jwtInterceptorl(){
return new JwtInterceptor();
}
}
前端（Vue.js）
1. 用户界面
创建登录表单，允许用户输入用户名和密码。
<div class="login-container">
<el-card class="login-card">
<h2 class="login-title">仓库管理系统</h2>
<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="20">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item style="margin: 10px 0;text-align: right;" label="温馨提示：忘记密码？联系管理员！">
<el-button type="primary" autocomplete="off" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>2. 发送登录请求
用户提交表单后，前端发送登录请求到后端的登录接口。
login.js代码如下：
import request from '@/utils/request'
// 用户登录
export function login (user) {
return request({
url: '/login',
method: 'post',
data: user
})
}Home.vue页面代码如下：
<script>
import { login } from '@/api/login'
export default {
data () {
return {
loginForm: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名!', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码!', trigger: 'blur' }
]
}
}
},
methods: {
submitForm () {
this.$refs.loginForm.validate(async (valid) => {
if (valid) {
// 在这里添加你的登录逻辑
const res = await login(this.loginForm)
if (res.code === 200) {
this.$message.success('登录成功')
localStorage.setItem('user', JSON.stringify(res.data)) // 存储用户信息到浏览器
localStorage.setItem('token', JSON.stringify(res.data.token))
this.$router.push('/main')
} else {
this.$message.error(res.msg)
}
} else {
this.$message.error('账号密码错误,请重新输入!')
return false
}
})
}
}
}
</script>3. 接收并存储Token
登录成功后，前端接收JWT Token，并将其存储在本地存储（localStorage）或Vuex状态管理中。
// 在这里添加你的登录逻辑
const res = await login(this.loginForm)
if (res.code === 200) {
this.$message.success('登录成功')
localStorage.setItem('user', JSON.stringify(res.data)) // 存储用户信息到浏览器
localStorage.setItem('token', JSON.stringify(res.data.token))
this.$router.push('/main')
}4. 发送请求时携带Token
在发送需要认证的请求时，前端需要在请求头中携带JWT Token。
// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8'
const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null
if (user) {
config.headers.token = user.token
}
return config
}, error => {
return Promise.reject(error)
})5. 路由守卫
使用Vue Router的路由守卫来保护需要认证的路由。
{ path: '/dashboard',
component: Dashboard,
meta:
{requiresAuth: true}
} // 标记需要验证的路由router.beforeEach((to, from, next) => {
const auth = require('@/router/auth').default // 引入认证守卫
auth.redirectIfNotAuthenticated(to, from, next)
})auth.js代码如下：
export default {
isAuthenticated () {
// 这里应该根据你的应用逻辑来检查用户是否登录
// 例如，检查本地存储（localStorage）中是否有token
return localStorage.getItem('token') !== null
},
redirectIfNotAuthenticated (to, from, next) {
if (!this.isAuthenticated()) {
to.path !== '/login' && to.matched.some(record => record.meta.requiresAuth) ? next({ path: '/login' }) : next()
} else {
next()
}
}
}
注意事项
- 安全性：确保使用HTTPS来传输JWT Token。
- Token存储：考虑使用HttpOnly的Cookie来存储Token，以避免XSS攻击。
- Token过期：JWT Token应该有过期时间，并且后端需要处理Token的刷新。
这只是一个简单的示例，实际应用中可能需要更复杂的逻辑，比如密码加密、Token刷新机制、用户角色和权限管理等。
