ruoyi-vue oauth2.0认证

### Ruoyi-Vue 中实现 OAuth2.0 认证的方法 #### 1. OAuth2.0 基础概念 OAuth2.0 是一种授权协议，主要用于第三方应用获取有限访问权限。其中最常用的是 **授权码模式** 和 **密码模式**[^1]。 - **授权码模式**：适用于客户端有后端的应用场景，安全性较高，适合大多数企业级应用。 - **密码模式**：适用于高度信任的客户端（如官方应用），用户直接向客户端提供用户名和密码。 #### 2. 环境准备 在实现 OAuth2.0 功能之前，需完成基础环境搭建。以下是主要步骤： - 安装并配置 Spring Cloud Gateway 或 Zuul 作为微服务网关。 - 配置 Redis 或其他存储工具用于会话管理。 - 修改前端项目的路由、登录逻辑以及 Cookie 存储机制[^2]。 #### 3. 后端实现细节 ##### (1) 添加依赖 在 `pom.xml` 文件中引入必要的 Maven 依赖项： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <dependency> <groupId>org.springframework.security.oauth.boot</groupId> <artifactId>spring-security-oauth2-autoconfigure</artifactId> </dependency> ``` ##### (2) 配置 OAuth2.0 参数 编辑 `application.yml` 文件，定义客户端 ID、密钥以及其他参数： ```yaml security: oauth2: client: client-id: test-client client-secret: secret scope: read,write authorized-grant-types: authorization_code,password,refresh_token resource: token-info-uri: http://localhost:8080/oauth/check_token ``` ##### (3) 创建 SSO 登录接口 在 `SysLoginController.java` 中新增支持单点登录的功能方法： ```java @RestController public class SysLoginController { @PostMapping("/ssoLogin") public ResponseEntity<?> ssoLogin(@RequestBody Map<String, String> loginInfo) { String username = loginInfo.get("username"); String password = loginInfo.get("password"); try { Authentication authentication = new UsernamePasswordAuthenticationToken(username, password); SecurityContextHolder.getContext().setAuthentication(authentication); // 返回 Token return ResponseEntity.ok(Map.of( "access_token", generateAccessToken(username), "token_type", "Bearer" )); } catch (Exception e) { return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(e.getMessage()); } } private String generateAccessToken(String username) { // 使用 JWT 工具生成 Token return Jwts.builder() .setSubject(username) .signWith(SignatureAlgorithm.HS512, "secretKey".getBytes()) .compact(); } } ``` ##### (4) 自定义过滤器 创建 `SsoFilter` 类拦截请求并验证 Token 是否有效： ```java @Component public class SsoFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest httpRequest = (HttpServletRequest) request; HttpServletResponse httpResponse = (HttpServletResponse) response; String authHeader = httpRequest.getHeader("Authorization"); if ("OPTIONS".equalsIgnoreCase(httpRequest.getMethod())) { httpResponse.setStatus(HttpServletResponse.SC_OK); chain.doFilter(request, response); } else { if (authHeader == null || !authHeader.startsWith("Bearer ")) { throw new RuntimeException("Missing or invalid Authorization header."); } String jwtToken = authHeader.substring(7); // 提取 Token validateJwtToken(jwtToken); // 验证 Token chain.doFilter(request, response); } } private void validateJwtToken(String token) { try { Jws<Claims> claimsJws = Jwts.parserBuilder() .setSigningKey("secretKey".getBytes()) .build() .parseClaimsJws(token); System.out.println("User authenticated as: " + claimsJws.getBody().getSubject()); } catch (Exception ex) { throw new RuntimeException("Invalid JWT token.", ex); } } } ``` #### 4. 前端集成 ##### (1) 路由白名单设置 在 `src/permission.js` 文件中声明无需鉴权的路径列表： ```javascript const whiteList = ['/login', '/auth-redirect']; ``` ##### (2) 统一登录页面 修改 `uniLogin.vue` 页面代码以适配 OAuth2.0 流程： ```vue <template> <div> <form @submit.prevent="handleLogin"> <input v-model="username" placeholder="Username"/> <input type="password" v-model="password" placeholder="Password"/> <button type="submit">Login</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' }; }, methods: { handleLogin() { this.$axios.post('/api/ssoLogin', { username: this.username, password: this.password }) .then(response => { const token = response.data.access_token; document.cookie = `token=${token}; path=/`; this.$router.push('/'); }).catch(error => console.error('Login failed:', error)); } } }; </script> ``` ##### (3) Cookie 处理 更新 `/src/utils/auth.js` 文件处理 Token 的存取逻辑： ```javascript function setToken(token) { document.cookie = `token=${encodeURIComponent(token)}; path=/`; } function getToken() { let cookies = decodeURIComponent(document.cookie).split('; '); for (let i of cookies) { if (i.indexOf('token=') === 0) { return i.split('=')[1]; } } return ''; } ``` #### 5. 多账户体系扩展 如果项目涉及多个独立的用户表（如系统管理员与普通会员），可以参考文献[^3]中的设计方案，在认证过程中区分不同类型的用户角色，并分别调用对应的数据库查询逻辑。 --- ###