javascript - 在reactjs中登录后无法重定向-6ren

javascript - 在reactjs中登录后无法重定向

转载作者：行者123 更新时间：2023-12-03 01:02:43

大家好，我是 ReactJS 的新手，因为我尝试使用 Node JS 后端对用户进行身份验证，尽管我能够在控制台中打印 json 消息，但无法将其重定向到主页。有人可以帮忙吗..这是login.js的代码(客户端 react )...

import React, { Component } from 'react';
import './Login.css';
import {Link, Redirect} from 'react-router-dom';
import {history} from 'history';

class AddLogin extends Component {
    constructor(props)
    {
        super(props)
        this.state = {
            user_email : "",
            user_password: "",
            user_remember : ""
        }   

    }
    change = e => 
    {
     this.setState({
         [e.target.name] : e.target.value
     })
    }
    getWebsite = () => {
        fetch("/").then(console.log(this.state));
    };
    onSubmit = e =>
    {
        e.preventDefault();
        //console.log(this.state);
        this.setState({
            user_email : "",
        user_password: "",
        user_remember : ""
        })


        fetch('login', {
            method : "POST",
            headers : {
              "Content-Type" : "application/json; charset=utf-8"
            },
            body : JSON.stringify(this.state)

          })
          .then(function(response){return response.json();})
          .then(function(json){
               if(json.success===true){
                console.log(json);
                // this.props.onRouteChange('/');
                this.props.history.push("/")
          }
        else{
            console.log("data 404");


        }})
          .then(this.getWebsite)
    }
    render() {
        return (
            <div>
                <body class="my-login-page">
    <section class="h-100">
        <div class="container h-100">
            <div class="row justify-content-md-center h-100">
                <div class="card-wrapper">
                    <div class="brand">
                        <img src="img/logo.jpg" />
                    </div>
                    <div class="card fat">
                        <div class="card-body">
                            <h4 class="card-title">Login</h4>
                            <form method="POST">

                                <div class="form-group">
                                    <label for="email">E-Mail Address</label>

                                    <input id="email" type="email" class="form-control" name="user_email" value={this.state.user_email} onChange={e => this.change(e)} required autofocus />
                                </div>

                                <div class="form-group">
                                    <label for="password">Password
                                        <a href="forgot.html" class="float-right">
                                            Forgot Password?
                                        </a>
                                    </label>
                                    <input id="password" type="password" class="form-control" name="user_password" value={this.state.user_password} onChange={e => this.change(e)} required data-eye />
                                </div>

                                <div class="form-group">
                                    <label>
                                        <input type="checkbox" name="user_remember" value={this.state.user_remember} onchange={e => this.change(e)}/> Remember Me
                                    </label>
                                </div>

                                <div class="form-group no-margin">
                                    <button class="btn btn-primary btn-block" onClick = {e => this.onSubmit(e)} >
                                        Login
                                    </button>
                                </div>
                                <div class="margin-top20 text-center">
                                    Don't have an account? <Link to ="/Register">Create One</Link>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    </body>


            </div>
        );
    }
}

export default AddLogin;

这里是后端代码(node.js代码......)

var express = require('express');
var router = express.Router();
var con = require('./db');
var func = require('./func.js');
var edo=require('./edonomix.js');

// router.get('/',function(req, res, next) 
// {

//   if(req.session.adminid)
//   {   
//     res.json({"success":true,'msg':'admin home page'});
//   }
//   else
//   {     
//     res.json({"success":true,'msg':'admin login page'});
//   }      
// });

router.post('/',function(req,res)
{

  if(req.session.adminid)
  {
    //data at home page   
    res.json({"success":true,'msg':'admin home page'});
  }
  else
  {   
        req.check('user_password','invalid password at least 6 character required').isLength({min:6,max:100});
        req.check('user_email','invalid username').isLength({min:2,max:100}).isEmail();

        var verrs=req.validationErrors();
        if(verrs)
        {
          res.json({ success:false,msg: verrs[0].msg,});
        }   
        else
        {
              console.log(req.ip);
              var admin = 
              {
                email:req.body.user_email,
                password:req.body.user_password
              };
              con.query("select *  from admin where email_id=?",admin.email,function(err,result,fields)
              {
                  if(err)
                  {
                          console.log(err);
                          res.json({'success':false});
                  }
                  else if(result.length==1)
                  {
                      if(edo.hashPassword(admin.password)===result[0].password)
                      {

                        var hour = 3600000; 
                        req.session.cookie.expires = new Date(Date.now() + hour);
                        req.session.cookie.maxAge = hour;
                        req.session.adminid=result[0].admin_id;
                        res.json({'success':true,'msg':'admin home page'})
                      }
                      else
                      {
                        //wrong pass
                        res.json({"success":true,'msg':'admin login page invalid email/password'});
                      }     
                  }
                  else
                  { 
                      res.json({"success":true,'msg':'admin login page wrong email'});    
                  }      
              });

        }

  }        
});

module.exports = router;

这是 App.js 代码(此处为 react 代码)...

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Home from './components/Home/Home';
import Sidebar from './components/Sidebar/Sidebar';
import AddProduct from './components/Product/AddProduct';
import ProductTable from './components/Product/ProductTable';
import AddBlog from './components/Blog/AddBlog';
import AddUser from './components/User/AddUser';
import AddPartner from './components/Partner/AddPartner';
import AddForms from './components/Forms/AddForms';
import Signin from './components/Login/AddLogin';
import Register from './components/Login/Register';
import Navigation from './components/Navigation';
import AddEquipment from './components/Equipment/AddEquipment';
import ViewEquipment from './components/Equipment/ViewEquipment';
import AddCustomer from './components/Customer/AddCustomer';
import CustomerTable from './components/Customer/CustomerTable';  
import Admin from './components/Admin/Admin';
import AMC from './components/AMC/AMC';
import Complaint from './components/Complaint/Complaint';
import Employee from './components/Employee/Employee';
import Profile from './components/Profile/Profile';
import Schedule from './components/Schedule/Schedule';
import Site from './components/Site/Site';
import Zone from './components/Zone/Zone';
import { Route } from 'react-router-dom';


class App extends Component {
    constructor() {
    super();
    this.state = {
      route: 'signin',
      isSignedIn: false,
    }
  }

  onRouteChange = (route) => {
    if (route === 'signout') {
      this.setState({isSignedIn: false})
    } else if (route === '/') {
      this.setState({isSignedIn: true})
      console.log(this.state.route);
    }
    else{
      console.log('thi is else');
    }
    this.setState({route: route});
  }




  render() {
   const { isSignedIn, route } = this.state;

    return (

        <div>

        <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange} />
        { route === '/'
        ?
        <div>
        <Header />
        <Sidebar />
        <Route path = "/" exact component = {Home} />
        <Route path = "/AddProduct" exact = {true} component = {AddProduct} />
        <Route path = "/ProductTable" exact = {true} component = {ProductTable} />
        <Route path="/AddBlog" exact = {true} component = {AddBlog} />
        <Route path = "/AddUser" exact = {true} component = {AddUser} />
        <Route path = "/AddPartner" exact = {true} component = {AddPartner} />  
        <Route path = "/AddForms" exact = {true} component = {AddForms} />
        <Route path = "/Register" exact = {true} component = {Register} />
        <Route path = "/AddEquipment" exact component = {AddEquipment} />
        <Route path = "/ViewEquipment" exact component = {ViewEquipment} />
        <Route path = "/AddCustomer" exact component = {AddCustomer} />
        <Route path = "/CustomerTable" exact component = {CustomerTable} /> 
        <Route path = "/Admin" exact = {true} component = {Admin} />
        <Route path = "/AMC" exact = {true} component = {AMC} />
        <Route path = "/Complaint" exact = {true} component = {Complaint} />
        <Route path = "/Employee" exact = {true} component = {Employee} />
        <Route path = "/Profile" exact = {true} component = {Profile} />
        <Route path = "/Schedule" exact = {true} component = {Schedule} />
        <Route path = "/Site" exact = {true} component = {Site} />
        <Route path = "/Zone" exact = {true} component = {Zone} />
        </div>
        : (
             route === 'signin'
             ? <Signin loadUser={this.loadUser} onRouteChange={this.onRouteChange}/>
             : <Register loadUser={this.loadUser} onRouteChange={this.onRouteChange}/>
            )
        }

        <Footer />

          </div>

    );
  }
}

export default App;

最佳答案

看起来您可能没有跟踪状态？我的建议是让 redux 参与进来。 Redux是一种跟踪状态的简单方法，无需在每次需要数据时都访问后端。一开始你会觉得有点困难，但一旦你明白了，你就再也不会回头了。

Redux 将允许您跟踪您的 jwt 或您用来在前端验证身份验证的任何内容。

关于javascript - 在reactjs中登录后无法重定向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52555221/

文章推荐： javascript - AngularJS ui.bootstrap 模式对话框未显示

文章推荐： javascript - 运行 N 个带有并行限制的 Promise

文章推荐： javascript - 如何组织授权的react路线？

文章推荐： javascript - 如何使用.net库类运行javascript函数？

java - 无法 Autowiring
我通过 spring ioc 编写了一些 Rest 应用程序。但我无法解决这个问题。这是我的异常(exception): org.springframework.beans.factory.BeanC
java - 无法@Autowire配置
我对 TestNG、Spring 框架等完全陌生，我正在尝试使用注释 @Value通过 @Configuration 访问配置文件注释。我在这里想要实现的目标是让控制台从配置文件中写出“hi”，通过
无法 malloc 然后转到程序顶部
为此工作了几个小时。我完全被难住了。这是 CS113 的实验室。如果用户在程序(二进制计算器)结束时选择继续，我们需要使用 goto 语句来到达程序的顶部。但是，我们还需要释放所有分配的内存。
无法 avformat_open_input .mp3
我正在尝试使用 ffmpeg 库构建一个小的 C 程序。但是我什至无法使用 avformat_open_input() 打开音频文件设置检查错误代码的函数后，我得到以下输出: Error code:
java - 无法 Autowiring
使用 Spring Initializer 创建一个简单的 Spring boot。我只在可用选项下选择 DevTools。创建项目后，无需对其进行任何更改，即可正常运行程序。现在，当我尝试在项目
macos - 无法 brew 链接qt
所以我只是在 Mac OS X 中通过 brew 安装了 qt。但是它无法链接它。当我尝试运行 brew link qt 或 brew link --overwrite qt 我得到以下信息: ton
git - 无法 pull 或提交
我在提交和 pull 时遇到了问题:在提交的 IDE 中，我看到: warning not all local changes may be shown due to an error: unable
gcc - 无法 grep 特定格式的文本
我跑 man gcc | grep "-L" 我明白了 Usage: grep [OPTION]... PATTERN [FILE]... Try `grep --help' for more inf
curl - 无法 CURL 远程文件
我有一段代码，旨在接收任何 URL 并将其从网络上撕下来。到目前为止，它运行良好，直到有人给了它这个 URL: http://www.aspensurgical.com/static/images/a
WireGuard - 无法 ping 服务器或解析域
在过去的 5 个小时里，我一直在尝试在我的服务器上设置 WireGuard，但在完成所有设置后，我无法 ping IP 或解析域。下面是服务器配置 [Interface] Address = 10.
GitLab:无法 fork 我自己的项目
我正在尝试在 GitLab 中 fork 我的一个私有(private)项目，但是当我按下 fork 按钮时，我会收到以下信息: No available namespaces to fork the
javascript - 无法 GET/定义路由
我这里遇到了一些问题。我是 node.js 和 Rest API 的新手，但我正在尝试自学。我制作了 REST API，使用 MongoDB 与我的数据库进行通信，我使用 Postman 来测试我的路
javascript - 无法 AppendChild - 尝试使一个方法在不同的类中附加另一个方法
下面的代码在控制台中给出以下消息: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child el
javascript - 数组被视为对象，无法 NgFor
我正在尝试调用一个新端点来显示数据，我意识到在上一组有效的数据中，它在数据周围用一对额外的“[]”括号进行控制台，我认为这就是问题是，而新端点不会以我使用数据的方式产生它! 这是 NgFor 失败的原
git - 无法 checkout 到无效路径
我正在尝试将我的 Symfony2 应用程序部署到我的 Azure Web 应用程序，但遇到了一些麻烦。推送到远程时，我在终端中收到以下消息 remote: Updating branch 'mas
docker - Minikube具有IP-无法 curl
Minikube已启动并正在运行，没有任何错误，但是我无法 curl IP。我在这里遵循:https://docs.traefik.io/user-guide/kubernetes/，似乎没有提到关闭
linux - 无法 docker 组成任何项目
每当我尝试docker组成任何项目时，都会出现以下错误。我尝试过有和没有sudo 我在这台机器上只有这个问题。我可以在Mac和Amazon WorkSpace上运行相同的容器。 (myslabs)
python - 无法 pip 安装手电筒
我正在尝试 pip install stanza 并收到此消息: ERROR: No matching distribution found for torch>=1.3.0 (from stanza
kubernetes 无法 ping 通其他服务
DNS 解析看起来不错，但我无法 ping 我的服务。可能是什么原因？来自集群中的另一个 Pod: $ ping backend PING backend.default.svc.cluster.l
spring - 无法 Autowiring 字段
我正在使用Hibernate 4 + Spring MVC 4当我开始 Apache Tomcat Server 8我收到此错误: Error creating bean with name 'wel

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在reactjs中登录后无法重定向