学习开发笔记2024.8.31(Springboot vue jwt)

1，防止刷新页面后用户登录信息退出，使用localStorage存取用户的token,每次加载登陆界面时先加载localStorage中的token直接跳转到用户主页面，以实现登录信息持久保留。

localStorage 是浏览器提供的一个存储 API，用于存储数据在客户端。

    if(resp.error_message === "success") 
            localStorage.setItem("jwt_token", resp.token);

    const jwt_token=localStorage.getItem("jwt_token");
        if (jwt_token) {
            store.commit("updateToken", jwt_token);
            store.dispatch("getinfo", {
                success() {
                    router.push({ name: "home" });
                    store.commit("updatePullingInfo", false);
                },
                error() {
                    store.commit("updatePullingInfo", false);
                }
            })

2，读出当前用户信息用以Service层实现修改信息接口

从 Spring Security 框架中获取当前用户认证信息的操作

UsernamePasswordAuthenticationToken authentication =
(UsernamePasswordAuthenticationToken)SecurityContextHolder
.getContext().getAuthentication();
UserDetailsImpl loginUser = (UserDetailsImpl) authentication.getPrincipal();
User user = loginUser.getUser();

3,Cors跨域问题，更换网络注意在CorsConfig修改允许的前端来源

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 匹配所有路径
                .allowedOrigins("http://192.168.0.109:8080")  // 允许的前端来源
                .allowedHeaders("*")  // 允许的请求头
                .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")  // 允许的方法
                .maxAge(3600);  // 预检请求缓存时间
    }
}

4，vuex学习

理清一下参数传递的逻辑

1. 前端获取用户输入

        首先，在前端，用户会在输入框中输入用户名和密码。通过 Vue 的 ref 来获取这些输入值：

let username = ref('');
let password = ref('');

2. 通过 store.dispatch 调用 Vuex Action

       当用户提交登录表单时，通过 store.dispatch 来调用 Vuex 中的 login action，并将 username 和 password 作为 data 参数传入：

在这个调用中：

username: username.value 和 password: password.value：将从 ref 中获取的用户输入的值作为登录凭据传递给 login action。
success 和 error 是两个回调函数，用于处理登录成功或失败的情况。

store.dispatch("login", {
    username: username.value,
    password: password.value,
    success() { 
        // 成功登录后的操作 
    },
    error() {
        // 登录失败后的操作
    }
})

3. 在 Action 中使用 AJAX 请求

        在 login action 中，使用 $.ajax（jQuery 的 AJAX 方法）来发送请求，将 data 中的 username 和 password 传递给后端：

            $.ajax({
                url: "http://127.0.0.1:3000/user/account/token/",
                type: "post",
                data: {
                    username: data.username,
                    password: data.password,
                },
                success(resp) {
                    if (resp.error_message === "success") {
                        localStorage.setItem("jwt_token", resp.token);
                        context.commit("updateToken", resp.token);
                        data.success(resp);
                    } else {
                        data.error(resp);
                    }
                },
                error(resp) {
                    data.error(resp);
                }
            });

4. 后端验证和响应

后端接收到 username 和 password 后，会进行验证。如果验证通过，后端会返回一个 JWT（JSON Web Token）和成功的消息；如果验证失败，返回错误消息。