springboot+vue3登录

### 关于 Spring Boot 和 Vue 3 实现登录功能

#### 创建 Spring Boot 应用程序
为了构建一个支持登录功能的应用，首先需要创建一个新的 Spring Boot 项目。可以通过 Spring Initializr 来初始化这个项目，并添加如下依赖项[^2]:
- Spring Web
- Spring Security
- Thymeleaf (用于模板渲染)

这些组件共同作用以提供安全认证服务。

// Application.java
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

#### 配置 Spring Security
为了让应用程序能够处理用户的认证请求，在 `SecurityConfig` 类中定义相应的配置：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
                .antMatchers("/login", "/register").permitAll() // 允许所有人访问注册和登陆页面
                .anyRequest().authenticated();                 // 所有其他请求都需要身份验证
                
        http.formLogin()
            .loginPage("/login")                               // 自定义登录页路径
            .defaultSuccessUrl("/", true);                     // 成功后的默认跳转地址
            
        http.logout()
            .logoutUrl("/logout");                             // 注销链接
    }

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
            .withUser("user").password("{noop}password").roles("USER");
    }
}

这段代码设置了基本的安全策略，包括允许匿名用户访问 `/login` 页面以及设置了一个简单的内存中的用户名密码组合供测试使用。

#### 构建前端部分 - 使用 Vue 3 进行开发
对于前端来说，则利用 Vue CLI 工具快速建立新的 Vue.js 项目。安装完成后修改 `src/main.js` 文件引入 Axios 客户端以便发送 HTTP 请求到后端 API 接口[^3]:

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

app.config.globalProperties.$http = axios;
app.mount('#app');

接着可以在 Login 组件里编写表单提交逻辑:

<template>
  <div id="login">
    <h1>Login</h1>
    <form v-on:submit.prevent="handleSubmit">
      <input type="text" placeholder="Username" v-model="username"/>
      <br/>
      <input type="password" placeholder="Password" v-model="password"/>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data(){
    return{
      username:'',
      password:''
    };
  },
  methods:{
    handleSubmit(e){
      e.preventDefault();
      
      const payload={
          username:this.username,
          password:this.password
      };

      this.$http.post('http://localhost:8080/login',payload).then(response=>{
          console.log(response.data);
          alert('Logged In!');
      }).catch(error=>console.error(error));
    }
  }
};
</script>

此段脚本实现了当点击按钮时向服务器发出 POST 请求的功能，携带用户名和密码作为参数传递给后台进行校验。