在标头中存储不记名令牌答案

【问题标题】：Store bearer token in header在标头中存储不记名令牌
【发布时间】：2022-01-12 09:05:02
【问题描述】：

这是我第一次使用 Context API，我对如何将我从 API 接收到的不记名令牌存储在授权标头中感到困惑。我在 YouTube 上看到了一些教程，并尝试将它们应用到我的代码中，但没有取得多大成功。我将留下我的上下文代码和我的登录名。登录没问题，API调用没问题，就是存储bearer token。

  const handleSubmit = (event) => {
    event.preventDefault();
   // dispatch({type: "LOGIN_START"})
       login({ username, password }, dispatch);
  };

{...}

AuthActions.js

export const loginStart = () => ({
    type: "LOGIN_START",
  });
  export const loginSuccess = (user) => ({
    type: "LOGIN_SUCCESS",
    payload: user,
  });
  export const loginFailure = () => ({
    type: "LOGIN_FAILURE",
  });
  
  //logout
  
  export const logout = () => ({
    type: "LOGOUT",
  });

AuthContext.js

import AuthReducer from "./AuthReducer";
import { createContext, useEffect, useReducer } from "react";

const INITIAL_STATE = {
  user: JSON.parse(localStorage.getItem("user")) || null,
  isFetching: false,
  error: false,
};

export const AuthContext = createContext(INITIAL_STATE);

export const AuthContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(AuthReducer, INITIAL_STATE);

  useEffect(() => {
    localStorage.setItem("user", JSON.stringify(state.user));
  }, [state.user]);

  return (
    <AuthContext.Provider
      value={{
        user: state.user,
        isFetching: state.isFetching,
        error: state.error,
        dispatch,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

AuthReducer.js

const AuthReducer = (state, action) => {
    switch (action.type) {
      case "LOGIN_START":
        return {
          user: null,
          isFetching: true,
          error: false,
        };
      case "LOGIN_SUCCESS":
        return {
          user: action.payload,
          isFetching: false,
          error: false,
        };
      case "LOGIN_FAILURE":
        return {
          user: null,
          isFetching: false,
          error: true,
        };
      case "LOGOUT":
        return {
          user: null,
          isFetching: false,
          error: false,
        };
      default:
        return { ...state };
    }
  };
  
  export default AuthReducer;

回应

{data: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTgwL…MzMX0.rpa4DVG8pERVERks4W9_tknFQUCOvIc3GCZZGbW3HU0', status: 200, statusText: '', headers: {…}, config: {…}, …}
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTgwLCJ1c2VybmFtZSI6InRlc3RlNDUiLCJpYXQiOjE2NDE5NDY3MzEsImV4cCI6MTY0MTk1MDMzMX0.rpa4DVG8pERVERks4W9_tknFQUCOvIc3GCZZGbW3HU0"
headers: {content-length: '170', content-type: 'application/json; charset=utf-8'}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
[[Prototype]]: Object

【问题讨论】：

似乎您为AuthContext.js 和AuthReducer.js 提供了相同的代码

标签： reactjs jwt

【解决方案1】：

为了访问您的上下文值，您应该使用useContext 钩子将您的上下文传递给它。这将返回您的值，然后您应该访问您的用户。因此，在您的登录请求之后，您应该执行以下操作（假设 res 是您的响应正文）：

const ctx = useContext(AuthContext);
ctx.dispatch("LOGIN_SUCCESS", res.data);

这将调用您的 reducer 并更新您的共享上下文状态。在后续请求中，为了访问您的 API 密钥，您只需：

const ctx = useContext(AuthContext);

并从上下文访问user 属性。您还应该创建一个挂钩来直接访问您喜欢的任何属性。这里的关键点是，使用 useContext 钩子可以获得作为上下文提供程序属性传递的值。

【讨论】：