在注册时，在数据库中创建了用户，但在浏览器中检查时 JWT 令牌是“未定义的”

Posted 2023-03-10

【中文标题】在注册时，在数据库中创建了用户，但在浏览器中检查时 JWT 令牌是“未定义的”

【英文标题】：On Register, User is created in the database, but JWT token is "undefined" when inspect in browser

【发布时间】：2020-05-13 14:12:19

【问题描述】：

我正在尝试注册一个用户，然后在注册后，在浏览器中有一个持续存在的令牌。目前，用户已注册并添加到数据库中，但是当我检查时，会话中没有令牌（状态和道具中的令牌：“未定义”），并且页面不会重定向到注册页面。

在控制台中，我的错误是：

POST http://localhost:5000/register 404 (Not Found)

Error: Request failed with status code 404 
at createError (createError.js:16) 
at settle (settle.js:17) 
at XMLHttpRequest.handleLoad (xhr.js:61)

反应

App.js

import React from "react";
import "./style.scss";
import  BrowserRouter, Route, Switch  from "react-router-dom";
import HomePage from "./home_page.js";
import TitlePage from "./title_page.js";
import AboutPage from "./about_page.js";
import BarberPage from "./barbers_page.js";
import ContactPage from "./contact_page.js";
import GalleryPage from "./gallery_page.js";
import LocationPage from "./location_page.js";
import SeminarsTrainingPage from "./seminars_training_page.js";
import ServicesPage from "./services_page.js";
import AppointmentsPage from "./appointments_page.js";
import RegisterPage from "./views/pages/RegisterPage";
import  connect  from "react-redux";

class App extends React.Component 

  state = 
    token: sessionStorage.getItem("token")
  ;

  onRegister = token => 
    sessionStorage.setItem("token", token);
    this.setState( token );
  ;

  render() 
    return (
      <>
        <BrowserRouter>
          <div>
            <Route exact path="/home" component=HomePage />
            <Route exact path="/about" component=AboutPage />
            <Route exact path="/barbers" component=BarberPage />
            <Route exact path="/contact" component=ContactPage />
            <Route exact path="/gallery" component=GalleryPage />
            <Route exact path="/location" component=LocationPage />
            <Route exact path="/seminars-training" component=SeminarsTrainingPage />
            <Route exact path="/services" component=ServicesPage />
            <Route exact path="/appointments" component=AppointmentsPage />
            <Route exact path="/titlepage" component=TitlePage />
            <Route
              exact
              path="/register"
              render=props => 
                return <RegisterPage ...props onRegister=this.onRegister />;
              
            />
          </div>
        </BrowserRouter>
      </>
    );
  


const mapStateToProps = state => 
  return 
    token: state.auth.token
  ;
;

export default connect(mapStateToProps)(App);

注册页面.js

import React,  Component  from "react";
import RegisterForm from "../../components/Forms/fields/RegistrationForm";

class RegisterPage extends Component 
    render() 
        console.log(this.props);

        return(
            <div>
                <h1>Register a new user</h1>
                <RegisterForm onRegister=this.props.onRegister />
            </div>
        );
    


export default RegisterPage;

RegistrationForm.js

import React,  Component  from "react";
import axios from "axios";
import  withRouter  from "react-router-dom";
import  setAuthToken  from "../../../actions";
import  connect  from "react-redux"

class RegisterForm extends Component 
  state = 
    email: "",
    password: ""
  ;

  onFormSubmit = event => 
    event.preventDefault();
    const  email, password  = this.state;

    axios
        .post('http://localhost:5000/register',  email, password )
        // .then(res => console.log(res))
        // .catch(err => console.log(err))
        .then(res =>  this.props.onRegister(res.data.token); this.props.history.push('/') )
        .catch(err => console.error(err))
  ;

  onInputChange = (name, event) => 
    this.setState( [name]: event.target.value );
  ;

  render() 
    // console.log(this.props);
    const  email, password  = this.state;

    return (
      <form onSubmit=this.onFormSubmit>
        <p>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            value=email
            onChange=event => this.onInputChange("email", event)
          />
        </p>
        <p>
          <label htmlFor="email">Password</label>
          <input
            type="password"
            value=password
            onChange=event => this.onInputChange("password", event)
          />
        </p>
        <p>
          <input type="submit" value="Register New User" />
        </p>
      </form>
    );
  


export default connect(null, 
  setAuthToken
)(withRouter(RegisterForm));

快递

index.js

const express = require("express");
const router = express.Router();
const passport = require("passport")
const AuthRoutes = require("./auth_routes");
const PageController = require('../controller/page_controller')
const AuthController = require('../controller/auth_controller')
const  authRedirect, authorise  = require('../middleware/auth_middleware')

router.use("/auth", AuthRoutes);

router.get('/dashboard', passport.authenticate('jwt', session: false), PageController.dashboard)

router.get("/", PageController.index);

router.post('/login', passport.authenticate('jwt', 
    successRedirect: "/dashboard",
    failureRedirect: "/login",
    session: false,
), AuthController.loginCreate)

module.exports = router;

auth_routes.js

const express = require("express");
const router = express.Router();
const  celebrate, Joi  = require("celebrate");
const AuthController = require("../controller/auth_controller");

router.post("/register", celebrate(
    body: 
        email: Joi.string().email().required(),
        password: Joi.string().required()
    
), AuthController.register);

module.exports = router;

auth_controller.js

const  UserModel  = require('../database/models/User')
const JWTService = require("../services/jwt_service");

function register(req, res, next) 
    const  email, password  = req.body;
    const user = new UserModel( email );

    UserModel.register(user, password, (err, user) => 
        if (err) 
            return next(new HTTPError(500, err.message));
        

        const token = JWTService.generateToken(user);

        return res.json( token );        
    );


async function logout(req, res) 
    req.logout()
    res.redirect('/')


async function loginNew(req, res)  
    res.render('pages/login')


async function loginCreate(req, res) 
    const token = jwt.sign( sub: req.user._id , process.env.SESSION_SECRET)
    res.json(token)


module.exports = 
    register,
    logout,
    loginNew,
    loginCreate

用户.js

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

// Create Schema
const UserSchema = new Schema(
  email: 
    type: String,
    required: true
  ,
  password: 
    type: String,
    required: true
  ,
);

const UserModel = mongoose.model("user", UserSchema)

module.exports =  UserModel, UserSchema 

jwt_services.js

const JWT = require("jsonwebtoken");
const expiry = "1d";

function generateToken(user) 
    const token = JWT.sign(
        
            email: user.email
        ,
        process.env.SESSION_SECRET,
        
            subject: user._id.toString(),
            expiresIn: expiry
        
    );

    return token;


module.exports = 
    generateToken

server.js

const express = require("express");
const exphbs = require("express-handlebars");
const morgan = require("morgan");
const mongoose = require("mongoose")
const cors = require('cors')

require ("dotenv").config()

const app = express();

app.use(cors(
  origin: process.env.FRONT_END_DOMAIN
))

app.engine("handlebars", exphbs(defaultLayout: "main"));
app.set("view engine", "handlebars");

mongoose
  .connect(
    "mongodb://localhost/raw_barbershop",
     autoIndex: false, useNewUrlParser: true 
  )
  .then(() => console.log("MongoDB successfully connected"))
  .catch(err => console.log(err));

app.use(express.urlencoded( extended: false ));
app.use(express.json());

const passport = require('./config/passport')

app.use(passport.initialize())
app.use(passport.session())

app.use(morgan("combined"));

app.use(require("./routes"));

app.use(express.static("public"));

app.use(require("./middleware/error_handler_middleware"));

const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server up and running on port $port !`));

module.exports = app;

【问题讨论】：

可以在react侧的寄存器中添加代码吗？

添加了 React 的注册页面和表单

你能检查一下res.data.token在注册的then块里面是什么吗？

res.data.token 未定义

【参考方案1】：

使用 sessionStorage.setItem 和 JSON.parse 读取数据时，您必须对数据进行 JSON.stringify。

另外，在你的 mapStateToProps 中，你有这个：

  return 
    token: state.auth.token
  ;
;

但这就是你的状态：state = token: 'value'

确保您具有相同的结构。