訪問令牌給予承諾-有解無憂

所以我有訪問和重繪令牌的 jwt 身份驗證。但問題是當訪問令牌過期并且我在前端生成一個新的訪問令牌時（反應）。它給了我一個承諾

backend/routes/auth.js（重繪令牌的路由以及生成重繪令牌并存盤它的位置（登錄路由））


router.post("/login", async (req, res) => {
  try {
    // Validating user
    const { error } = loginValidation(req.body);
    if (error) return res.status(400).json(error.details[0].message);

    // Making sure email is correct
    const user = await User.findOne({ email: req.body.email });
    if (!user) return res.status(400).json("Invalid email or password");

    // Making sure the password is correct
    const validPass = await bcrypt.compare(req.body.password, user.password);
    if (!validPass) return res.status(400).json("Invalid email or password");

    const userPayload = {
      _id: user._id,
      displayname: user.displayname,
      username: user.username,
      email: user.email,
      bookmarkedTweets: user.bookmarkedTweets,
      likedTweets: user.likedTweets,
      followers: user.followers,
      following: user.following,
      date: user.date,
      month: user.month,
      day: user.day,
      year: user.year,
      profilePic: user.profilePic,
    };

    // Generating access token
    const accessToken = generateAccessToken(userPayload);

    // Generating refresh token
    const refreshToken = jwt.sign(
      user.toJSON(),
      process.env.REFRESH_TOKEN_SECRET
    );

    // Getting info for refresh token
    const newRefreshToken = new RefreshToken({
      refreshToken: refreshToken,
    });

    // Saving refresh token into db
    await newRefreshToken.save();

    res.json({
      _id: user._id,
      displayname: user.displayname,
      username: user.username,
      email: user.email,
      password: user.password,
      bookmarkedTweets: user.bookmarkedTweets,
      likedTweets: user.likedTweets,
      followers: user.followers,
      following: user.following,
      date: user.date,
      month: user.month,
      day: user.day,
      year: user.year,
      profilePic: user.profilePic,
      accessToken: accessToken,
      refreshToken: refreshToken,
    });
  } catch (error) {
    res.sendStatus(500);
    console.log(error);
  }
});


router.post("/refresh/token", async (req, res) => {
  try {
    // Getting refresh token
    const refreshToken = req.body.token;

    // Finding refresh token
    const _refreshToken = await RefreshToken.findOne({ refreshToken: refreshToken });

    // Making sure there is a refresh token and that refresh token exists in db
    if (refreshToken == null) return res.sendStatus(401);
    if (!_refreshToken) return res.sendStatus(403);

    // Vaifying refresh token
    jwt.verify(refreshToken, process.env.REFRESH_TOKEN_SECRET, (err, user) => {
      if (err) return res.sendStatus(403);

      const userPayload = {
        _id: user._id,
        displayname: user.displayname,
        username: user.username,
        email: user.email,
        bookmarkedTweets: user.bookmarkedTweets,
        likedTweets: user.likedTweets,
        followers: user.followers,
        following: user.following,
        month: user.month,
        day: user.day,
        year: user.year,
        date: user.date,
        profilePic: user.profilePic,
      };

      // Generating access token
      const accessToken = generateAccessToken(userPayload);

      res.json({ accessToken });
    });
  } catch (error) {
    res.sendStatus(500);
  }
});

后端/中間件/authenticateToken.js

const jwt = require("jsonwebtoken");

require("dotenv").config();

module.exports = function authenticateToken(req, res, next) {
  const authHeader = req.headers["authorization"]; // Getting auth header
  const token = authHeader && authHeader.split(" ")[1]; // Getting access token from auth header
  if (token == null) return res.sendStatus(401);

  jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
    if (err) return res.sendStatus(403); // Making sure the token is valid
    req.user = user;
    next();
  });
};

后端/utils/generateAccessToken.js

const jwt = require("jsonwebtoken");

require("dotenv").config();

module.exports = function (user) {
  return jwt.sign(user, process.env.ACCESS_TOKEN_SECRET, { expiresIn: "15s" });
};

前端/src/api/axios.js

import axios from "axios";

const BASE_URL = "http://localhost:5000";
const accessToken = sessionStorage.getItem("accessToken");
const refreshToken = localStorage.getItem("refreshToken");

export default axios.create({
  baseURL: BASE_URL,
  headers: { "Content-Type": "application/json" },
});

const client = axios.create({ baseURL: BASE_URL });

export const axiosAuth = async ({ ...options }) => {
  // Sending access token with request
  client.defaults.headers.common.Authorization = `Bearer ${accessToken}`;

  const onSuccess = (response) => response;
  const onError = (error) => {
    if (error.response.status === 403) {
      // Making function to generate new access token
      const refresh = async () => {
        const { data } = await axios.post(`${BASE_URL}/auth/refresh/token`, {
          token: refreshToken,
        });
        return data;
      };

      // Generating access token
      const newAccessToken = refresh();
      sessionStorage.setItem("accessToken", newAccessToken);

      return client({ ...options });
    }

    throw error;
  };

  return client(options).then(onSuccess).catch(onError);
};

前端/src/modals/Tweet.modal.js（我在哪里使用 axiosAuth）

import React, { useState } from "react";

import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined";
import CollectionsOutlinedIcon from "@mui/icons-material/CollectionsOutlined";
import GifBoxOutlinedIcon from "@mui/icons-material/GifBoxOutlined";
import BarChartOutlinedIcon from "@mui/icons-material/BarChartOutlined";
import SentimentSatisfiedAltOutlinedIcon from "@mui/icons-material/SentimentSatisfiedAltOutlined";
import ScheduleOutlinedIcon from "@mui/icons-material/ScheduleOutlined";
import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
import Loader from "../components/Loader/Loader.comp";

import { useDispatch, useSelector } from "react-redux";
import {
  setTweetModal,
  setTweetPending,
  tweetErrorClear,
  tweetFail,
} from "../features/tweet.slice";
import { axiosAuth } from "../api/axios";

function Tweet() {
  const [textfield, setTextfield] = useState("");
  const { user } = useSelector((state) => state.user);
  const { tweetModalIsOpen, error, isLoading } = useSelector(
    (state) => state.tweet
  );
  const { profilePic } = user;

  const dispatch = useDispatch();

  if (error !== "") {
    setTimeout(() => dispatch(tweetErrorClear()), 3000);
  }

  const handleOnClick = async () => {
    dispatch(setTweetPending(true));

    try {
      await axiosAuth({
        url: "/posts/create",
        method: "POST",
        body: { textfield },
      });
    } catch (error) {
      dispatch(tweetFail(error.response.data));
    }
  };

  return (
    <div
      className={
        tweetModalIsOpen
          ? `h-screen w-screen absolute inset-0 bg-white py-2 px-4`
          : `hidden`
      }
    >
      <div className="flex-items justify-between">
        <div
          className="p-1 cursor-pointer rounded-full hover:bg-gray-200 transition-color"
          onClick={() => dispatch(setTweetModal(false))}
        >
          <ArrowBackIcon style={{ fontSize: "1.5rem" }} />
        </div>
        <button
          className="py-1 px-4 transition-color rounded-full bg-blue-500 text-white font-bold hover:bg-blue-600"
          onClick={() => handleOnClick()}
        >
          {isLoading ? <Loader forPage={false} /> : <h1>Tweet</h1>}
        </button>
      </div>
      <div className="flex mt-6 space-x-2">
        {profilePic === "" ? (
          <AccountCircleOutlinedIcon style={{ fontSize: "2rem" }} />
        ) : (
          <img src={profilePic} alt="profile_pic" />
        )}
        <div>
          <textarea
            name="tweet"
            id="tweet"
            rows="4"
            value={textfield}
            onChange={(e) => setTextfield(e.target.value)}
            className="w-screen outline-none text-xl text-gray-700 placeholder:text-gray-600"
            placeholder="What's happening?"
          ></textarea>
          <div className="flex-items space-x-2 text-blue-400 font-bold py-0.5 px-2 rounded-full hover:bg-blue-50 transition-color cursor-pointer w-max">
            <PublicOutlinedIcon style={{ fontSize: "1.5rem" }} />
            <h1>Everyone can reply</h1>
          </div>
          <div className="ring-1 ring-gray-100 my-2 w-[75%]" />
          <div className="flex-items space-x-2 text-blue-500">
            <div className="tweet-icon">
              <CollectionsOutlinedIcon style={{ fontSize: "1.5rem" }} />
            </div>
            <div className="tweet-icon">
              <GifBoxOutlinedIcon style={{ fontSize: "1.5rem" }} />
            </div>
            <div className="tweet-icon">
              <BarChartOutlinedIcon style={{ fontSize: "1.5rem" }} />
            </div>
            <div className="tweet-icon">
              <SentimentSatisfiedAltOutlinedIcon
                style={{ fontSize: "1.5rem" }}
              />
            </div>
            <div className="tweet-icon">
              <ScheduleOutlinedIcon style={{ fontSize: "1.5rem" }} />
            </div>
            <div className="tweet-icon">
              <LocationOnOutlinedIcon style={{ fontSize: "1.5rem" }} />
            </div>
          </div>
        </div>
      </div>
      {error && <h1 className="error err-animation">{error}!</h1>}
    </div>
  );
}

export default Tweet;

提前致謝！

uj5u.com熱心網友回復：

我認為這_refreshToken就是您所指的承諾。為了獲得該承諾的最終值（即重繪令牌本身），添加async到您的中間件函式和await賦值陳述句：

router.post("/refresh/token", async (req, res) => {
  try {
    const refreshToken = req.body.token;
    const _refreshToken = await RefreshToken.findOne({ refreshToken: refreshToken });

同樣在frontend/src/api/axios.js：

const onError = async (error) => {
  ...
  const newAccessToken = await refresh();

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/489761.html

標籤：反应表示验证 jwt

上一篇：在scala3中，如何為Iteratable和Array之類的東西獲取給定的工廠？

下一篇：每個匯入的.js檔案都會運行Express中間件，這正常嗎？