鍍金池/ 問答/HTML/ 在React項(xiàng)目里,現(xiàn)在已經(jīng)做完了登陸頁(yè)面,我想怎么才能登陸后才能跳轉(zhuǎn)到其他頁(yè)面

在React項(xiàng)目里,現(xiàn)在已經(jīng)做完了登陸頁(yè)面,我想怎么才能登陸后才能跳轉(zhuǎn)到其他頁(yè)面

我現(xiàn)在已經(jīng)做完了登陸頁(yè)面,

登陸后可以跳轉(zhuǎn)到其他的頁(yè)面,但是現(xiàn)在如果直接輸入其他頁(yè)面的url后

也可以直接到其他的頁(yè)面,

不登陸的話,輸入其他的ur不會(huì)跳轉(zhuǎn)到其他的頁(yè)面

這是我登陸驗(yàn)證的代碼

loginCheck (e) {
        e.preventDefault();
        //console.log('返回首頁(yè)中')

        const _self = this;
        const {
            username,
            password
        } = this.state;
        if(!username) return console.log('用戶名不能為空');
        if(!password) return console.log('密碼不能為空');

        e.preventDefault();
        /*
        var ajaxUrl = 'http://'+ '192.168.31.75' + ':' + '9230' +
            '/user?action=login&' + 'username=' + this.state.username+
            '&password='+this.state.password;

        $.ajax({

            url: ajaxUrl,
            //url: 'http://192.168.31.75:9800/apiTest?province=' + params.name,
            type: "GET",
            success: function (regionData) {
                console.log(regionData)
                if(regionData == 'loginTrue') {
                    _self.context.router.push('/sit');
                }
            }
        })
        */



        // 創(chuàng)建對(duì)象時(shí)設(shè)置初始化信息

        if(window.fetch){
            let headers = new Headers({
                'Content-Type': 'text/plain',
            });
            // 添加(append)請(qǐng)求頭信息
            //headers.append('X-My-Custom-Header', 'CustomValue');

            /**
             * same-origin 只有來自同域的請(qǐng)求才能成功,其它的均將被拒絕。
             * cors 允許不同域的請(qǐng)求,但要求有正確的 CORs 頭信息。
             * cors-with-forced-preflight 在執(zhí)行真正的調(diào)用前先執(zhí)行preflight check。
             * no-cors 目前這種模式是無(wú)法執(zhí)行的。
             */


            var request = new Request('http://'+ ENV.ws.url + ':' + ENV.ws.port +
                '/user?action=login&username='+ username + '&password=' + password, {
                method: 'POST',  // method - 支持 GET, POST, PUT, DELETE, HEAD
                mode: 'cors', // 允許不同域的請(qǐng)求,但要求有正確的 CORs 頭信息
                redirect: 'follow', // 重定向 - follow, error, manual
                headers: headers
            });

            fetch(request).then(function(response) {
                return response.text();
            })
                .then(function(regionData) {
                    console.log('請(qǐng)求登陸返回的值', regionData);
                    if(regionData == 'loginTrue') {
                        _self.context.router.push('/user');
                    }
                })
                .catch(function(error) {
                    log('Request failed', error)
                });
        }

    }
回答
編輯回答
短嘆

登錄成功后的回調(diào)函數(shù)中跳轉(zhuǎn)到相應(yīng)的頁(yè)面就好了。
頁(yè)面跳轉(zhuǎn)react-router有詳細(xì)的介紹。

2018年6月20日 02:23
編輯回答
擱淺

題主問的應(yīng)該是,如果未登錄狀態(tài)下,直接輸入url進(jìn)入某個(gè)需要登錄之后才能進(jìn)入的頁(yè)面,會(huì)重定向到登錄頁(yè)面。這里其實(shí)涉及到后端的配合,在登錄成功之后,應(yīng)該把登錄狀態(tài)記錄到cookie中,后端在接收每次網(wǎng)絡(luò)請(qǐng)求時(shí),都會(huì)校驗(yàn)登錄狀態(tài),如果未登錄或者登錄過期,會(huì)給你重定向到登陸頁(yè)。

2017年7月7日 22:50