使用Cookies的Passport JWT身份验证-页面刷新后出现401未经授权的错误

如何解决使用Cookies的Passport JWT身份验证-页面刷新后出现401未经授权的错误

我正在努力使用户授权工作很长时间。我当前遇到的问题是，该用户可以成功登录并获得授权，但是一旦单击另一个页面，他们将变为未经授权。我回到登录页面，调试器显示401授权的错误。我看过多个似乎有类似问题的帖子，但是我没有看到他们使用cookie的任何帖子。我对下一步的工作很迷茫。 对于下一步的工作有任何帮助或指导，我将不胜感激。

passport.js

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const JwtStrategy = require('passport-jwt').Strategy;
const ExtractJwt = require('passport-jwt').ExtractJwt;
const User = require('./database/models/User');

const cookieExtractor = req =>{
    let token = null;
    if(req && req.cookies){
        token = req.cookies["access_token"];

    }
    return token;
}

// authorization 
passport.use(new JwtStrategy({
    jwtFromRequest : cookieExtractor,secretOrKey : "Secret"

},(payload,done)=>{
    User.findById({_id : payload.sub},(err,user)=>{
        if(err)
            return done(err,false);
        if(user)
            return done(null,user);
        else
            return done(null,false);
    });
}));

// authenticated local strategy using username and password
passport.use(new LocalStrategy((username,password,done)=>{
    User.findOne({username},user)=>{
        // something went wrong with database
        if(err)
            return done(err);
        // if no user exist
        if(!user)
            return done(null,false);
        // check if password is correct
        user.comparePassword(password,done);
        
    });
}));

UserRoute.js

const express = require('express')
const userRouter = express.Router()
const passport = require('passport');
const JWT = require("jsonwebtoken");
const passportConfig = require("../..//passport")
const User = require("..//../database/models/User")
const signToken = userID =>{
    return JWT.sign({
        iss : "NoobCoder",sub : userID
    },"Secret",{expiresIn : "1h"});
}
module.exports = app => {
app.post('/api/register2', (req, res) => {
  

    const { username, password, role } = req.body
    // ADD VALIDATION
    User.findOne({ username: username }, (err, user) => {
        if (err) {
            console.log('User.js post error: ', err)
        } else if (user) {
            res.json({
                error: `Sorry, already a user with the username: ${username}`
            })
        }
        else {
            const newUser = new User({
                username: username,                password: password,                role: role
            })
            newUser.save((err, savedUser) => {
                if (err) return res.json(err)
                res.json(savedUser)
            })
        }
    })
})

app.post('/api/login',passport.authenticate('local',{session : false}),(req,res)=>{
    if(req.isAuthenticated()){
       const {_id,username,role} = req.user;
       const token = signToken(_id);
       res.cookie('access_token',token,{httpOnly: true,sameSite:true}); 
       res.status(200).json({isAuthenticated : true,user : {username,role}});
    }
});
app.get('/api/logout',passport.authenticate('jwt',res)=>{
    res.clearCookie('access_token');
    res.json({user:{username : "",role : ""},success : true});
});
app.get('/api/authenticated',res)=>{
    const {username,role} = req.user;
    console.log(req.user);
    res.status(200).json({isAuthenticated : true,role}});
});




};

AuthServices.js

export default {
  login: user => {
    return fetch("/api/login",{
      method: "post",body: JSON.stringify(user),headers: {
        "Content-Type": "application/json"
      }
    })
      .then(res => res.json())
      .then(data => data);
  },register: user => {
    return fetch("/api/register2",logout: () => {
    return fetch("/api/logout")
      .then(res => res.json())
      .then(data => data);
  },isAuthenticated: () => {
    return fetch("api/authenticated",{
    headers : { 
      'Content-Type': 'application/json','Accept': 'application/json'
    }

  }).then(res => {
      if (res.status != 401) return res.json().then(data => data);
      else return { isAuthenticated: false,user: { username: "",role: "" } };
    });
  }
};

login.js

import React,{ useState,useRef,useEffect,useContext } from "react";
import AuthService from "../Services/AuthService";
import Message from "../components/Message";
import { AuthContext } from "../Context/AuthContext";
import styled from "styled-components";

const Login = props => {
  const [user,setUser] = useState({ username: "",password: "" });
  const [message,setMessage] = useState(null);
  const authContext = useContext(AuthContext);
  let timerID = useRef(null);

  const onChange = e => {
    setUser({ ...user,[e.target.name]: e.target.value });
  };

  const onSubmit = e => {
    e.preventDefault();
    AuthService.login(user).then(data => {
      console.log(data);
      const { isAuthenticated,user,message } = data;
      if (isAuthenticated) {
        authContext.setUser(user);
        authContext.setIsAuthenticated(isAuthenticated);
        props.history.push("/step1");
      } else setMessage(message);
    });
  };

  const GridWrapper = 
  {
   marginTop: '4em',marginLeft: '28em',marginRight: '1em'
  }
const LoginForm = 
(
    <div>
    <form onSubmit={onSubmit}>
    <h3>Please sign in</h3>
    <label htmlFor="username" className="sr-only">
      Username:{" "}
    </label>
    <input
      type="text"
      name="username"
      value={user.username}
      onChange={onChange}
      className="form-control"
      
      placeholder="Enter Username"
    />
    <label htmlFor="password" className="sr-only">
      Password:{" "}
    </label>
    <input
      type="password"
      value={user.password}
      name="password"
      autoComplete="on"
      onChange={onChange}
      
      className="form-control"
      placeholder="Enter Password"
    />
    <button className="btn btn-lg btn-primary btn-block" type="submit">
      Log in{" "}
    </button>
    
  </form>
  </div>
)
  return (
    <div className = 'col-md-6' style = {GridWrapper}>
    
        
     {LoginForm}
    
    </div>
  );
};

export default Login;