如果任何url收到响应401，我想让token = null

Question

axiosConfig.js

axiosClient.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        const { response } = error;
        if (error.message === "Network Error") {
            alert("network error");
        }
        if (response.status === 401) {
            const{setToken} = useAuthContext();
            alert('unauthorized');
            localStorage.removeItem("ACCESS_TOKEN");
            setToken();
        }
        throw error;
    }
);

AuthContextProvider.jsx

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext({
    user: null,
    token: null,
    setUser: () => { },
    setToken: () => { }
});

export const AuthContextProvider = ({ children }) => {
    const [user, setUser] = useState({});
    const [token, _setToken] = useState(localStorage.getItem('ACCESS_TOKEN'));

    const setToken = (token) => {
        _setToken(token)
        if (token) {
            localStorage.setItem('ACCESS_TOKEN', token);
        } else {
            localStorage.removeItem('ACCESS_TOKEN');
        }
    }

    return (
        <AuthContext.Provider value={{
            user,
            token,
            setUser,
            setToken
        }}>
            {children}
        </AuthContext.Provider>
    )
}

export const useAuthContext = () => useContext(AuthContext);

但这不起作用。问题出在哪里

1. 我的浏览器控制台中没有显示错误。
2. 但仍然是setToken();不工作。

当任何 url 未经授权而得到 401 时，我想让 setToken() = null。我的代码没问题吗

Answer 1

useAuthContext

是一个react hooks，你不能在react hooks或react组件之外使用hooks。

您应该使用像 zustand 或 use-one 这样的存储库。这里我选择

use-one

作为例子：

import axiosClient from 'xior'; // or import axiosClient from 'axios';

import { setToken } from './useAuth';

axiosClient.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    const { response } = error;
    if (response?.status === 401) {
      alert('unauthorized');
      setToken('');
    }
    throw error;
  }
);

// useAuth.ts
import { create } from 'use-one';

const isBrowser = typeof document !== 'undefined';

const initialState = {
  user: null,
  token: isBrowser ? localStorage.getItem('ACCESS_TOKEN') : '',
};

const [useAuth, authStore] = create(initialState);

export { useAuth, authStore, isBrowser };

export function setToken(token) {
  localStorage.setItem('ACCESS_TOKEN', token);
  authStore.setState((state) => ({
    ...state,
    token,
  }));
}

export function setUser(user) {
  authStore.setState((state) => ({
    ...state,
    user,
  }));
}

并且您可以使用 React 组件中的

useAuth

钩子进行 UI 更新：

import { useAuth, authStore } from './useAuth';
 
export default function TestCom() {
  const [state, setAuthState] = useAuth();
  // Same with: const state = authStore.getState();
  // setAuthState: authStore.setState

  return <pre>{JSON.stringify(state, null, 2)}</pre>
}