文章/答案/技术大牛

发布

社区首页 >问答首页 >使用node.js和react.js成功登录后未能重定向到仪表板页面

问使用node.js和react.js成功登录后未能重定向到仪表板页面
EN

Stack Overflow用户

提问于 2022-10-26 13:31:30

回答 1查看 28关注 0票数 0

在管理员成功登录后，我无法将他们重定向到电子商务页面。

当我试图重定向管理员时，他们被重定向到http://localhost:3001/ecommerce，尽管我希望他们被重定向到http://localhost:3000/ecommerce。我的node.js应用程序运行在端口3001，react.js运行在端口3000。

React.js代码

import React, {useEffect,useState} from 'react';
import {Navigate} from 'react-router-dom';
import { MdErrorOutline } from 'react-icons/md';
import Axios from 'axios';


const Loginpage = () => {
const [name, setName] = useState('');
const [password, setPassword] = useState('');
const [credetials ,setCredetials] = useState([]);
const [messege, setMessege] = useState('');


useEffect(() => {
Axios.post('http://localhost:3001/post/getadmins').then((results) => {
  setCredetials(results.data);
  console.log('login details', results.data);
})
},[])


const submit = (event ) => {
  event.preventDefault();
Axios.post('http://localhost:3001/getadmins',{
  username:name,
  password:password,


}).then((response) => {
  if(response.data.messege){
  setMessege(response.data.messege);
  console.log("Unsuccessful")

  

}else{
  setMessege(response.data[0]);
  < Navigate to="/ecommerce" />
  console.log("Successful");
}

})
}

  return (
    <div

    className ="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div className="w-full max-w-md space-y-8">
    <div>
      <img className="mx-auto h-12 w-auto" src="https://res.cloudinary.com/dbb4s7ej0/image/upload/v1666081081/Company%20Logo/logoo_ibnh0c-removebg-preview_hfrfd2.png" alt="Your-Company"/>
      <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Welcome Admin</h2>

    </div>
    <form className="mt-8 space-y-6" action="#" method="POST">

      <div className="-space-y-px rounded-md shadow-sm">
      <div className="relative z-0 mb-6 w-full group">
      <input  type="text" onChange={(e) => {setName(e.target.value)}} name="floating_username" id="floating_username" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required=""/>
      <label htmlfor="floating_username" className="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">username</label>
  </div>
  <div className="relative z-0 mb-6 w-full group">
      <input  type="password" onChange={(e) => {setPassword(e.target.value)}} name="floating_password" id="floating_password" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required=""/>
      <label htmlfor="floating_password" className="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">password</label>
  </div>
      </div>

      <div class="flex items-center justify-between">



      </div>

      <div>
        <button type="submit"  onClick = {submit} className="group relative flex w-full justify-center rounded-md border border-transparent bg-blue-900 py-2 px-4 text-sm font-medium text-white hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
          <span className="absolute inset-y-0 left-0 flex items-center pl-3">

            <svg className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
            </svg>
          </span>
          Sign in
        </button>
      </div>
      
      <div className='text-center text-red-500'>
      
      {messege}
      </div>
    </form>
  </div>
</div>
  );
}

export default Loginpage;

node.js代码

const express = require('express');
const db = require('../database/database');
const router = express.Router();


/*login admins*/
router.post('/getadmins' ,(req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    const sqlcheck = 'SELECT * FROM nuafricadb.admin WHERE username = ? and password = ?';
    db.query(sqlcheck, [username,password],(error,results,feilds) => {
    console.log(results);
     
   if(results.length > 0){
       
        console.log(results);
        res.redirect('/ecommerce');
        
    }else{

        console.log(error);
        res.send({messege:'Access Denied!!'})
    }
    res.end();
    })
});

module.exports = router;

node.js

reactjs

express

回答 1

Stack Overflow用户

发布于 2022-10-27 11:17:56

我从我的res.redirect代码中删除了node.js，以阻止应用程序重定向到错误的url。此外，我还必须更改我在react.js代码上的if else语句。

更新的react.js代码

import React, {useEffect,useState} from 'react';
import { MdErrorOutline } from 'react-icons/md';
import Axios from 'axios';
import {toast} from 'react-hot-toast';
import {useNavigate } from 'react-router-dom';

const Loginpage = (props) => {
const [name, setName] = useState('');
const [password, setPassword] = useState('');
const [credetials ,setCredetials] = useState([]);
const [messege, setMessege] = useState('');


useEffect(() => {
Axios.post('http://localhost:3001/post/getadmins').then((results) => {
  setCredetials(results.data);
  console.log('login details', results.data);
})
},[])

let navigate = useNavigate();
const submit = (event ) => {

  
  event.preventDefault();
Axios.post('http://localhost:3001/getadmins',{
  username:name,
  password:password,

}).then((response) => {
  if(response.data.messege){
  setMessege(response.data.messege);
  console.log("Unsuccessful")

}else{
  setMessege(response.data[0]);
  return navigate("/ecommerce");
 
}
})
}

  return (
    <div

    className ="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div className="w-full max-w-md space-y-8">
    <div>
      <img className="mx-auto h-12 w-auto" src="https://res.cloudinary.com/dbb4s7ej0/image/upload/v1666081081/Company%20Logo/logoo_ibnh0c-removebg-preview_hfrfd2.png" alt="Your-Company"/>
      <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Welcome Admin</h2>

    </div>
    <form className="mt-8 space-y-6" action="#" method="POST">

      <div className="-space-y-px rounded-md shadow-sm">
      <div className="relative z-0 mb-6 w-full group">
      <input  type="text" onChange={(e) => {setName(e.target.value)}} name="floating_username" id="floating_username" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required=""/>
      <label htmlfor="floating_username" className="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">username</label>
  </div>
  <div className="relative z-0 mb-6 w-full group">
      <input  type="password" onChange={(e) => {setPassword(e.target.value)}} name="floating_password" id="floating_password" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required=""/>
      <label htmlfor="floating_password" className="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">password</label>
  </div>
      </div>

      <div class="flex items-center justify-between">



      </div>

      <div>
        <button type="submit"  onClick = {submit} className="group relative flex w-full justify-center rounded-md border border-transparent bg-blue-900 py-2 px-4 text-sm font-medium text-white hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
          <span className="absolute inset-y-0 left-0 flex items-center pl-3">

            <svg className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
            </svg>
          </span>
          Sign in
        </button>
      </div>
      
      <div className='text-center text-red-500'>
      
      {messege}
      </div>
    </form>
  </div>
</div>
  );
}

export default Loginpage;

更新的Node.js代码

const express = require('express');
const db = require('../database/database');
const router = express.Router();



/*Our sql queries will go here*/
router.post('/posts/categories', (req,res) => {
const ctgyName = req.body.categoryN;
const ctydescr = req.body.categoryDes;
const ctgdate = req.body.creationD;
const ctyUpdate = req.body.updationD;
const ctgyImage = req.body.categoryImg;

/* sanitising the variables */
const sqlinsert = "INSERT INTO category (category_name,catergory_descrip,creation_date,updation_date,category_image) VALUES (?,?,?,?,?)";
db.query(sqlinsert,[ctgyName,ctydescr,ctgdate,ctyUpdate,ctgyImage], (err,result) => {
    console.log(err);
});  
})


/*Our sql queries will go here*/
router.post('/posts/products', (req,res) => {
const pName = req.body.productN;
const productcompanyCo = req.body.productcompanyC;
const productpr = req.body.productp;
const beforediscountpr = req.body.beforediscountp;
const productDescriptionDes = req.body.productDescriptionD;
const pdescr = req.body.productC;
const pimg1 = req.body.Img1;
const pimg2 = req.body.Img2;
const pimg3 = req.body.Img3;
const shippingchargeSh = req.body.shippingchargeS;
const productavailabilitypr = req.body.productavailabilityp;
const postingdatedd = req.body.postingdated;
const updationdateupd = req.body.updationdateup;

/* sanitising the variables */
const sqlinsert = "INSERT INTO products (product_name,product_company,product_price,product_pricebefore_discount,product_description,product_category,product_image1,product_image2,product_image3,shipping_charge,product_availability,posting_date,updation_date) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)";
db.query(sqlinsert,[pName,productcompanyCo,productpr,beforediscountpr,productDescriptionDes,pdescr,pimg1,pimg2,pimg3,shippingchargeSh,productavailabilitypr,postingdatedd,updationdateupd], (err,result) => {
    console.log(err);
});  
});

 



/*login admins*/
router.post('/getadmins' ,(req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    const sqlcheck = 'SELECT * FROM nuafricadb.admin WHERE username = ? and password = ?';
    db.query(sqlcheck, [username,password],(error,results,feilds) => {
    console.log(results);
     
   if(results.length > 0){
       
        console.log(results);
       
        
    }else{

        console.log(error);
        res.send({messege:'Access Denied!!'})
    }
    res.end();
    })
});

module.exports = router;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74208688

复制

相似问题

问使用node.js和react.js成功登录后未能重定向到仪表板页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用node.js和react.js成功登录后未能重定向到仪表板页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用node.js和react.js成功登录后未能重定向到仪表板页面
EN