CRUB，前端认证问题，spring security

Question

4天，我找不到任何解决方案。我有后端的Spring靴和前端的反应。如何在我的首页上创建登录系统和会话？我有两个控制器要测试。

@GetMapping("/protected")
    public String showProtected() {
        return "protected page";
    }

    @GetMapping("/public")
    public String showPublic(){
        return "public page";
    }

在服务器站点“localhost:8080/protected and/public”上，一切正常，当im未经身份验证时返回登录表单，然后我可以使用凭据登录。我怎样才能在我的定制头版上做到完全一样呢？我只能用以下内容显示我的公共页面：

axios.get("http://localhost:8080/account/public")
            .then(response => this.setState({stuff: response.data}))

如何在前端页面上使用自定义登录表单进行登录会话，以获取受保护的页面？这是我的安全配置：

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
                .and()
                .authorizeRequests()
                .antMatchers("/login").permitAll()
                .antMatchers("/account/protected").hasRole(USER)
                .antMatchers("/account/public").permitAll()
                .antMatchers("/account/register").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .and()
                .httpBasic();
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService);
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
        configuration.setAllowedHeaders(Arrays.asList("authorization", "content-type", "x-auth-token", "x-xsrf-token", "access-control-allow-headers", "access-control-allow-methods", "access-control-allow-origin"));
        configuration.setExposedHeaders(Arrays.asList("x-auth-token"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

Answer 1

您有/account/protected by user/role user。因此，您应该将身份验证过程返回的令牌发送到安全路由

axios.get('http://localhost:8080/protected', {
            headers: {
                'authorization': localStorage.getItem('token'),
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(res => {
            resolve(res);
        }).catch(error => {
            reject(error.message);
        });

希望对你有用祝你好运