账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    在React项目里,现在已经做完了登陆页面,我想怎么才能登陆后才能跳转到其他页面
    82
    0

    我现在已经做完了登陆页面,

    登陆后可以跳转到其他的页面,但是现在如果直接输入其他页面的url后

    也可以直接到其他的页面,

    不登陆的话,输入其他的ur不会跳转到其他的页面

    这是我登陆验证的代码

    loginCheck (e) {
            e.preventDefault();
            //console.log('返回首页中')
    
            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');
                    }
                }
            })
            */
    
    
    
            // 创建对象时设置初始化信息
    
            if(window.fetch){
                let headers = new Headers({
                    'Content-Type': 'text/plain',
                });
                // 添加(append)请求头信息
                //headers.append('X-My-Custom-Header', 'CustomValue');
    
                /**
                 * same-origin 只有来自同域的请求才能成功,其它的均将被拒绝。
                 * cors 允许不同域的请求,但要求有正确的 CORs 头信息。
                 * cors-with-forced-preflight 在执行真正的调用前先执行preflight check。
                 * no-cors 目前这种模式是无法执行的。
                 */
    
    
                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', // 允许不同域的请求,但要求有正确的 CORs 头信息
                    redirect: 'follow', // 重定向 - follow, error, manual
                    headers: headers
                });
    
                fetch(request).then(function(response) {
                    return response.text();
                })
                    .then(function(regionData) {
                        console.log('请求登陆返回的值', regionData);
                        if(regionData == 'loginTrue') {
                            _self.context.router.push('/user');
                        }
                    })
                    .catch(function(error) {
                        log('Request failed', error)
                    });
            }
    
        }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 花生哥哥 普通会员 1楼

      在React项目中,你可以使用路由功能来实现这个需求。在React Router库中,你可以使用useHistory函数来获取浏览器的浏览历史,然后在页面加载完成后,通过这个导航到目标页面。

      以下是一个简单的例子:

      ```jsx import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

      function App() { return ( ); }

      function Home() { return (

      Welcome to Home

      ); }

      function About() { return (

      About Us

      ); }

      function Login() { return (

      Login

      e.preventDefault()}>
      ); }

      function Logout() { return (

      Logout

      {/ If you want to redirect to the login page when user clicks the logout button /}
      ); }

      export default App; ```

      在这个例子中,我们创建了四个路由,每个路由都有一个对应的页面组件。在Login组件中,我们添加了一个表单,用户可以在表单中输入他们的电子邮件和密码。然后,我们在Logout组件中,我们添加了一个按钮,当用户点击这个按钮时,我们导航到登录页面。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部