springboot加vue实现登录

实现SpringBoot与Vue登录功能

后端（SpringBoot）部分

1. 创建SpringBoot项目
   使用Spring Initializr生成项目，添加依赖：

   • spring-boot-starter-web
   • spring-boot-starter-security
   • spring-boot-starter-data-jpa（如需数据库）
   • jjwt（用于JWT令牌生成）

2. 配置Spring Security
   创建安全配置类，继承WebSecurityConfigurerAdapter：

   @Configuration
   @EnableWebSecurity
   public class SecurityConfig extends WebSecurityConfigurerAdapter {
       @Override
       protected void configure(HttpSecurity http) throws Exception {
           http.csrf().disable()
               .authorizeRequests()
               .antMatchers("/api/auth/").permitAll()
               .anyRequest().authenticated();
       }
   }

3. 实现登录接口
   创建AuthController处理登录请求：

   @RestController
   @RequestMapping("/api/auth")
   public class AuthController {
       @PostMapping("/login")
       public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {
           // 验证用户名密码
           // 生成JWT令牌
           return ResponseEntity.ok(new JwtResponse(jwtToken));
       }
   }

前端（Vue）部分

1. 创建Vue项目
   使用Vue CLI创建项目：

   vue create vue-login-demo

2. 安装axios
   用于发送HTTP请求：

   npm install axios

3. 创建登录页面
   在src/views下创建Login.vue：

   <template>
     <form @submit.prevent="handleSubmit">
       <input v-model="username" placeholder="用户名">
       <input v-model="password" type="password" placeholder="密码">
       <button type="submit">登录</button>
     </form>
   </template>
   
   <script>
   import axios from 'axios';
   export default {
     data() {
       return {
         username: '',
         password: ''
       }
     },
     methods: {
       async handleSubmit() {
         try {
           const res = await axios.post('http://localhost:8080/api/auth/login', {
             username: this.username,
             password: this.password
           });
           localStorage.setItem('token', res.data.token);
           this.$router.push('/dashboard');
         } catch (error) {
           console.error(error);
         }
       }
     }
   }
   </script>

4. 配置路由
   在src/router/index.js中添加登录路由：

   import Login from '../views/Login.vue'
   const routes = [
     {
       path: '/login',
       name: 'Login',
       component: Login
     }
   ]

跨域处理

1. 后端配置CORS
   在SpringBoot中添加配置类：

   @Configuration
   public class CorsConfig {
       @Bean
       public WebMvcConfigurer corsConfigurer() {
           return new WebMvcConfigurer() {
               @Override
               public void addCorsMappings(CorsRegistry registry) {
                   registry.addMapping("/")
                       .allowedOrigins("http://localhost:8081")
                       .allowedMethods("*");
               }
           };
       }
   }

2. 前端代理配置
   在vue.config.js中配置代理：

   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://localhost:8080',
           changeOrigin: true
         }
       }
     }
   }

JWT验证

1. 后端JWT工具类
   创建JWT生成与验证工具：

   public class JwtUtils {
       private static final String SECRET_KEY = "your-secret-key";
   
       public static String generateToken(String username) {
           return Jwts.builder()
               .setSubject(username)
               .setIssuedAt(new Date())
               .setExpiration(new Date(System.currentTimeMillis() + 86400000))
               .signWith(SignatureAlgorithm.HS256, SECRET_KEY)
               .compact();
       }
   }

2. 前端请求拦截
   在main.js中配置axios拦截器：

   axios.interceptors.request.use(config => {
     const token = localStorage.getItem('token');
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
     return config;
   });

部署注意事项

1. 生产环境需配置HTTPS
2. 敏感信息应使用环境变量存储
3. 前端打包后需配置Nginx反向代理