通过Spring Security登录VueJS应用

Question

我正在构建一个具有Spring后端和VueJS前端的and应用程序。我试图通过Spring Security保护我的应用程序，但我注意到了一些主要问题。首先，我尝试使用标准的spring安全登录机制来保护应用程序，但由于vue应用程序运行在与我的spring应用程序不同的端口上

.authorizeRequests()
                .antMatchers("/","/css/**","/login.html","/register.html","/index.html")
                .permitAll().and().authorizeRequests().antMatchers("/console/**").permitAll()
                .antMatchers("/application.html","**localhost:8080**").hasAnyRole("USER","ADMIN")
                .antMatchers("/admin_application.html").hasAnyRole("ADMIN")
                [...]

tomcat没有监听vue端口(在本例中为:8080)，因此它无法看到是否有人在此端口上进行连接。

我还研究了JWT和OAuth，但由于我的时间预算很紧，对我来说实现起来太多了。

有没有可能使用Spring Security机制来保护前端？如果是这样的话，你有什么资源可以让我看看吗？

亲切的问候

Answer 1

我将转发URI设置为我在Spring中创建并附加的html文档

<meta http-equiv="refresh" content="0; url=http://localhost:8080/" />

我的spring安全登录表单中有一个指向我的vue应用程序的链接。

只需通过nginx (或更多)关闭我的Vue端口，然后我就可以正常工作了:)

Answer 2

不得不在vue中重新实现它，

使用vue登录，根据我的spring安全进行身份验证，并在vuex store中设置一个store变量。

router.js：

beforeEnter: (to, from, next) => {
                if (store.state.loggedIn == false) {
                    next(false);
                } else {
                    next();
                }
            }

main.js：

    mutations: {
        loginSuccess(state){
        state.loggedIn = true
        },

    logoutSuccess(state){
        state.loggedIn = false
    }

登录方式

    methods: {
        performLogin() {
            let formData = new FormData();
            formData.set("username", this.username);
            formData.set("password", this.password);
            Axios.post('http://localhost:8181/perform_login', formData,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
             .then((result) => {
             this.$store.commit('loginSuccess')
             window.location = '#/dashboard'
             })
             .catch((error) => {
             console.error(error)
             })
        },

愿这对你们中的一位有所帮助！