REACT JS POST http://localhost:4000/api/activation 401未经授权

如何解决REACT JS POST http://localhost:4000/api/activation 401未经授权

您好，我正在使用 JWT 处理激活电子邮件帐户，现在它的工作方式是在用户注册后用户通过他们正在注册的链接收到电子邮件应该点击，他们将被导航到 Activate.js 页面，在那里他们会找到一个按钮，他们应该点击并激活他们的帐户。

这是我单击“激活”按钮时出现错误的地方，我收到如下所示的错误，这是 Chrome 控制台中显示的错误的 Chrome 图像（下）。

POST http://localhost:4000/api/activation 401（未授权）

我认为对我的问题的怀疑可能是我的 Activate.js 文件的POST ROUTE 这是下面专门用于 POST 路由的代码。

  //   const { name,show,token } = formData;
  const { username,show } = formData;

  const handleSubmit = e => {
    e.preventDefault();

    axios
      .post(`${process.env.REACT_APP_API_URL}/activation`,{
        token
      })
      .then(res => {
        setFormData({
          ...formData,show: false
        });
        toast.success(res.data.message);
      })
      .catch(err => {      
        toast.error(err.response.data.errors);
      });
  };

  const navigate = useNavigate();

下面的代码是我的 Activate.js 文件 和我的 POST 路由 的完整代码。

Activate.js 代码

/* eslint-disable no-unused-vars */
import React,{ useState,useEffect } from 'react';
import authSvg from '../assets/welcome.svg';
import { ToastContainer,toast } from 'react-toastify';
import axios from 'axios';
import jwt from 'jsonwebtoken';
import { authenticate,isAuth } from '../helpers/auth';
// import { Link,Redirect } from 'react-router-dom';
import { Link as RouterLink,useNavigate,useParams } from 'react-router-dom';

const Activate = ({ match }) => {
  const [formData,setFormData] = useState({
    username: '',token: '',show: true
  });

  const { token } = useParams();

  useEffect(() => {
    /*   get token from params like /active/token
    then decode this token and get name*/
    // let token = match.params.token;
    let username = jwt.decode(token);

    if (token) {
      setFormData({ ...formData,username,token });
    }

    console.log(token,username);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[]);
//   const { name,show: false
        });
        toast.success(res.data.message);
      })
      .catch(err => {      
        toast.error(err.response.data.errors);
      });
  };

  const navigate = useNavigate();

  return (
    <div className='min-h-screen bg-gray-100 text-gray-900 flex justify-center'>
      {isAuth() ? <navigate to='/app/dashboard' /> : null}
      <ToastContainer />
      <div className='max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1'>
        <div className='lg:w-1/2 xl:w-5/12 p-6 sm:p-12'>
          <div className='mt-12 flex flex-col items-center'>
            <h1 className='text-2xl xl:text-3xl font-extrabold'>
              Welcome
              {/* Welcome {name} */}
            </h1>

            <form
              className='w-full flex-1 mt-8 text-indigo-500'
              onSubmit={handleSubmit}
            >
              <div className='mx-auto max-w-xs relative '>
                <button
                  type='submit'
                  className='mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none'
                >
                  <i className='fas fa-user-plus fa 1x w-6  -ml-2' />
                  <span className='ml-3'>Activate your Account</span>
                </button>
              </div>
              <div className='my-12 border-b text-center'>
                <div className='leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2'>
                  Or sign up again
                </div>
              </div>
              <div className='flex flex-col items-center'>
                <a
                  className='w-full max-w-xs font-bold shadow-sm rounded-lg py-3
           bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5'
                  href='/register'
                  target='_self'
                >
                  <i className='fas fa-sign-in-alt fa 1x w-6  -ml-2 text-indigo-500' />
                  <span className='ml-4'>Sign Up</span>
                </a>
              </div>
            </form>
          </div>
        </div>
        <div className='flex-1 bg-indigo-100 text-center hidden lg:flex'>
          <div
            className='m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat'
            style={{ backgroundImage: `url(${authSvg})` }}
          ></div>
        </div>
      </div>
      ;
    </div>
  );
};

export default Activate;

出于某种原因，我也认为错误可能是我需要添加标题，但我尝试实现如下标题

headers: {  
  Accept: 'application/json','Content-Type': 'application/json',Authorization: `Bearer ${token}`
},

但是他们对上面的代码不走运，决定从这个平台查询。

另外对于我的其他怀疑，我认为错误可能是我在 Activate.js 中路由 isAuth() 的方式，例如我正在使用 "react-router": "^6.0.0-beta.0",使用我后来关注的代码，他们正在使用 Redirect 并且在我的版本中 Redirect 不再支持，所以我尝试使用 useNavigate 作为导航。

以下是代码示例。

这是我试图从教程中引用的重定向代码

{isAuth() ? <Redirect to='/app/dashboard' /> : null}

这里是我如何使用 navigate 而不是 Redirect {isAuth() ? <navigate to='/app/dashboard' /> : null} 修改它，因为我怀疑它可能想要发布和路由代码并且它失败了我修改了重定向以使用导航的方式，这只是我带来此错误的另一个理论。

另一个怀疑这个错误我怀疑，这也可能是我在我的后端配置我的bodyParser的方式 因为这是一个正在开发的 MERN 应用程序，这是我如何在 index.js 中配置我的 bodyParser 的示例代码后端中的strong>文件。

app.use(
  bodyParser.urlencoded({
    extended: true,})
);
app.use(bodyParser.json());

下面的代码是我的激活 routes.js 文件的说明；

/* eslint-disable no-unused-vars */
const express = require('express');
// eslint-disable-next-line no-unused-vars
const mongoose = require('mongoose');

const router = express.Router();

// eslint-disable-next-line no-unused-vars
// const RegistersignUp = require('../model/registerSignUpmodel');

// Load Controllers
// import controller (new method)
// eslint-disable-next-line no-unused-vars
const {
  registersignUp,activationController,// Here is where I export my activationController from controllers.
  loginController,forgetController,resetController,// activateAccount,} = require('../controllers/registerauth');

// Validation
const {
  validRegister,validLogin,forgotPasswordValidator,resetPasswordValidator,} = require('../helpers/valid');

router.post('/register',validRegister,registersignUp);
// router.post('/login',loginController);
router.post('/login',loginController);
router.post('/activation',activationController); //On this line is how  I route my activation
router.put('/password/forget',forgetController);
router.put('/password/reset',resetController);

module.exports = router;

最后是我的 /controllers/registerauth，在我的 registerauth.js 中，我为我的用户注册存储控制器强>.

在下面的代码中，我只指定了 activationController 因为它是我们正在努力解决错误的一个。

/* eslint-disable no-param-reassign */
/* eslint-disable no-lonely-if */
/* eslint-disable no-dupe-keys */
/* eslint-disable no-shadow */
/* eslint-disable no-else-return */
/* eslint-disable prettier/prettier */
/* eslint-disable arrow-body-style */
/* eslint-disable object-shorthand */
/* eslint-disable no-sequences */
/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
// eslint-disable-next-line no-unused-vars
const expressJwt = require('express-jwt');
const _ = require('lodash');
// eslint-disable-next-line import/no-unresolved
const { oauth2client,UserRefreshClient } = require('google-auth-library');
const fetch = require('node-fetch');
const { validationResult } = require('express-validator');
const jwt = require('jsonwebtoken');
// I will use for send email sendgrid you can use nodemailer also
const sgMail = require('@sendgrid/mail');
const mailgun = require('mailgun-js');
const mail = require('@sendgrid/mail');
const RegistersignUp = require('../model/registerSignUpmodel');
// Custom error handler to get useful error from database errors
// eslint-disable-next-line import/no-unresolved
const { errorHandler } = require('../helpers/dbErrorHandling');

const DOMAIN = 'sandBoxb7287b4c62c74643864ccb6d8de5f0c6.mailgun.org';

// eslint-disable-next-line no-use-before-define
const mg = mailgun({ apiKey: process.env.MAILGUN_APIKEY,domain: DOMAIN });

// sgMail.setApiKey(process.env.MAIL_KEY);

exports.activationController = (req,res) => {
  const { token } = req.body

  if (token) {
    // Verify the token is valid or not or expired
    jwt.verify(token,process.env.JWT_ACCOUNT_ACTIVATION,(err,decoded) => {
      if (err) {
        return res.status(401).json({
          error: 'Expired Token,Signup again'
        })
      } else {
        // if valid save to database
        // Get username phone email firstName lastName password
        const { username,email,phone,firstName,lastName,password } = jwt.decode(token)
    
        const user = new RegistersignUp(     {
          username,password,})
    
        user.save((err,user) => {
          if (err) {
            console.log('Save error',errorHandler(err));
            return res.status(401).json({
              errors: errorHandler(err)
            });
          } else {
            return res.json({
              success: true,message: 'Signup success',user,});
          }
        })
      }
    })
  } else {
    return res.json({
      message: 'error happening please try again'
    })
  }
}