反应 + 护照本地猫鼬会话问题

时间:2021-03-31 10:38:16

标签: reactjs mern passport-local-mongoose

我正在构建 MERN 应用。用于请求/身份验证/会话的 Passport-local-mongoose。这是后端注册路线:

const express = require("express");
const router = express.Router();
const User = require("../models/users");
const passport = require("passport");

passport.use(User.createStrategy());
passport.serializeUser(function(user, done) {
  done(null, user.id);
});
passport.deserializeUser(function(id, done) {
  User.findById(id, function(err, user) {
    done(err, user);
  });
});


router.post("/",(req,res)=>{


console.log(req.body);
User.register({
    name: req.body.username,
    email: req.body.email
}, req.body.password, (err,user)=>{
    if(err){
        console.log(err);
    }else{
        passport.authenticate("local")(req, res, () => {
          console.log(user.name + " registered and authenticated.");
          })
    }
});
res.redirect("/")
})
module.exports = router;

这是反应后注册页面:

import React, { useState } from "react";
import axios from "axios";
axios.defaults.withCredentials = true;



function Reg(){

const [newUserData, setnewUserData] = useState({
    username:"",
    email:"",
    password:""
});

const change = (e)=>{
    const {name,value} = e.target;
setnewUserData({...newUserData, [name]:value})
};

function submit(e){
e.preventDefault();
axios.post("http://localhost:4000/reg",newUserData);
setnewUserData({
    username:"",
    email:"",
    password:""
})
console.log(newUserData);
};

    return <div>


<div class="container mt-5">
  <h1>Register</h1>

  <div class="row">
    <div class="col-sm-8">
      <div class="card">
        <div class="card-body">

          <form onSubmit={submit}>
            <div class="form-group">
              <label for="name">Username</label>
              <input onChange={change} value={newUserData.username} type="text" class="form-control" name="username"/>
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input onChange={change} value={newUserData.email} type="email" class="form-control" name="email"/>
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input onChange={change} value={newUserData.password} type="password" class="form-control" name="password"/>
            </div>
            <button type="submit" class="btn btn-dark">Register</button>
          </form>

        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card social-block">
        <div class="card-body">
          <a class="btn btn-block btn-social btn-google" href="/auth/google" role="button">
            <i class="fab fa-google"></i>
            Sign Up with Google
          </a>
        </div>
      </div>
    </div>

  </div>
</div>
{/* <form onSubmit={submit}>

<input onChange={change} type="text" name="name" value={newUserData.name} placeholder="Username"/>
<input onChange={change} type="email" name="email" value={newUserData.email} placeholder="Email"/>
<input onChange={change} type="text" name="password" value={newUserData.password} placeholder="Password"/>
<button  type="submit" class="btn btn-dark">Register</button> */}



{/* </form> */}
        
  
  </div>

  
};


export default Reg;

所以我可以用这个创建新用户,它工作正常。但是,如果我检查用户是否仅通过简单的后端家庭路由进行身份验证:

router.get("/",(req,res)=>{
  res.send(req.isAuthenticated());
  console.log(req.isAuthenticated());
});

,它总是发送“false”,即使 User.register 工作正常,并且 passport.authenticate 向我发送回该用户已通过身份验证。 我已经设置了 cors、凭据以及我可以在网上找到的所有内容来修复它,但仍然是“错误的”。后端似乎没有将用户的数据存储在会话中。 我被困了 3 天)这真的是做还是死伙计们)我应该在哪里看得更近?也许 passport.serialize 是在错误的地方,或者 smth。也许我导入的所有东西的顺序有点错误。我想知道是否有人完全使用 passport-local-mongoose 开发了相同类型的应用程序。如果是的话,我真的需要你的建议。

0 个答案:

没有答案