springboot+vue3 用session机制，实现登录验证。

最新推荐文章于 2024-09-11 16:36:53 发布

天天进步2015

最新推荐文章于 2024-09-11 16:36:53 发布

阅读量537

点赞数 3

分类专栏：编程技巧文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/exlink2012/article/details/140763354

版权

编程技巧专栏收录该内容

85 篇文章 0 订阅

订阅专栏

后端

创建Spring Boot项目：使用Spring Initializr创建一个Spring Boot项目，选择依赖Spring Web和Spring Session.
添加依赖：
在pom.xml中，添加Spring Session和Spring Security依赖：

<dependency>
    <groupId>org.springframework.session</groupId>
    <artifactId>spring-session-core</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.session</groupId>
    <artifactId>spring-session-data-redis</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

配置Redis：
在application.properties中添加Redis配置：

spring.redis.host=localhost
spring.redis.port=6379
spring.session.store-type=redis

创建用户认证配置类：
创建一个类SecurityConfig来配置Spring Security：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/api/login", "/api/register").permitAll()
                .anyRequest().authenticated()
                .and()
            .csrf().disable()
            .formLogin()
                .loginProcessingUrl("/api/login")
                .defaultSuccessUrl("/home", true)
                .permitAll()
                .and()
            .logout()
                .logoutUrl("/api/logout")
                .permitAll();
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

创建用户服务类：
创建一个类UserService来管理用户：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
public class UserService {

    @Autowired
    private PasswordEncoder passwordEncoder;

    private Map<String, String> users = new HashMap<>();

    public void register(String username, String password) {
        users.put(username, passwordEncoder.encode(password));
    }

    public boolean authenticate(String username, String password) {
        String encodedPassword = users.get(username);
        return encodedPassword != null && passwordEncoder.matches(password, encodedPassword);
    }
}

创建控制器类：
创建一个控制器类AuthController来处理登录和注册请求：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.Authentication;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("/api")
public class AuthController {

    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public Map<String, Object> login(@RequestParam String username, @RequestParam String password) {
        Map<String, Object> response = new HashMap<>();
        if (userService.authenticate(username, password)) {
            response.put("status", "success");
        } else {
            response.put("status", "error");
            response.put("message", "Invalid username or password");
        }
        return response;
    }

    @PostMapping("/register")
    public Map<String, Object> register(@RequestParam String username, @RequestParam String password) {
        userService.register(username, password);
        Map<String, Object> response = new HashMap<>();
        response.put("status", "success");
        return response;
    }

    @GetMapping("/home")
    public Map<String, Object> home(Authentication authentication) {
        Map<String, Object> response = new HashMap<>();
        response.put("message", "Welcome " + authentication.getName());
        return response;
    }
}

前端

创建Vue 3项目：
使用Vue CLI创建一个新的Vue 3项目：

vue create frontend

安装Axios：
在Vue项目根目录下安装Axios用于发送HTTP请求：

npm install axios

创建登录和注册页面：

Login.vue:

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <div>
        <label>Username:</label>
        <input v-model="username" type="text" required/>
      </div>
      <div>
        <label>Password:</label>
        <input v-model="password" type="password" required/>
      </div>
      <div>
        <button type="submit">Login</button>
      </div>
    </form>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        if (response.data.status === 'success') {
          this.$router.push('/home');
        } else {
          this.error = response.data.message;
        }
      } catch (e) {
        this.error = 'An error occurred';
      }
    }
  }
};
</script>

Register.vue:

<template>
  <div>
    <h1>Register</h1>
    <form @submit.prevent="register">
      <div>
        <label>Username:</label>
        <input v-model="username" type="text" required/>
      </div>
      <div>
        <label>Password:</label>
        <input v-model="password" type="password" required/>
      </div>
      <div>
        <button type="submit">Register</button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async register() {
      try {
        const response = await axios.post('/api/register', {
          username: this.username,
          password: this.password
        });
        if (response.data.status === 'success') {
          this.$router.push('/login');
        }
      } catch (e) {
        console.error(e);
      }
    }
  }
};
</script>

Home.vue:

<template>
  <div>
    <h1>Welcome Home</h1>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async logout() {
      try {
        await axios.post('/api/logout');
        this.$router.push('/login');
      } catch (e) {
        console.error(e);
      }
    }
  }
};
</script>

配置路由：
在src/router/index.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import Home from '../views/Home.vue';

const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/home', component: Home },
  { path: '/', redirect: '/login' }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;