मैं एक स्प्रिंग बैकएंड और एक VueJS दृश्यपटल के साथ एक वेबपैप बना रहा हूँ। मैं स्प्रिंग सुरक्षा के माध्यम से अपने ऐप को सुरक्षित करने की कोशिश कर रहा हूं लेकिन मैंने कुछ बड़ी समस्याएं देखी हैं। सबसे पहले मैंने मानक वसंत सुरक्षा लॉगिन तंत्र के साथ ऐप को सुरक्षित करने की कोशिश की लेकिन इस तथ्य के कारण कि वू ऐप मेरे वसंत ऐप की तुलना में एक अलग बंदरगाह पर चलता है

.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")
                [...]

टॉमकैट वीयू पोर्ट पर नहीं सुन रहा है (इस मामले में 8080) इसलिए यह नहीं देख सकता कि कोई इस बंदरगाह पर कनेक्ट हो रहा है या नहीं।

मैंने जेडब्ल्यूटी और ओएथ को भी देखा लेकिन इस तथ्य के कारण कि मेरे पास तंग समय का बजट है, मेरे लिए इसे लागू करना बहुत अधिक था।

क्या फ्रंटएंड को सुरक्षित करने के लिए स्प्रिंग सुरक्षा तंत्र का उपयोग करने का कोई संभावित तरीका है? यदि हां, तो क्या आपके पास कोई संसाधन है जिसे मैं देख सकता हूं?

सधन्यवाद

1
R. Polito 12 पद 2019, 12:07

2 जवाब

मैंने अग्रेषण यूआरआई को एक HTML दस्तावेज़ में सेट किया है जिसे मैंने अपने स्प्रिंग में बनाया है और संलग्न किया है

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

इसके लिए मेरे पास मेरे वसंत सुरक्षा लॉगिन फॉर्म से मेरे वीयू ऐप का एक लिंक है।

बस मेरे Vue पोर्ट को nginx (या तो) के माध्यम से बंद करना होगा और फिर मुझे जाने के लिए अच्छा होना चाहिए :)

0
R. Polito 12 पद 2019, 13:18

इसे Vue में फिर से लागू करना पड़ा,

Vue के साथ लॉगिन करना, मेरी स्प्रिंग सुरक्षा के विरुद्ध प्रमाणीकरण करना और vuex store में एक स्टोर वैरिएबल सेट करना

राउटर.जेएस:

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

मुख्य जेएस:

    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)
             })
        },

क्या यह आप में से एक की मदद कर सकता है!

0
R. Polito 14 पद 2019, 01:20