Redux 工具包不記名令牌未定義

Question

Error: authorization bearer undefined 顯示在瀏覽器上。 這是我的 這是我的 OrderScreen.js 的 useEffect 代碼在這里，我試圖派遣檢查用戶是否有價值，如果沒有將他們重定向到 /login 這是登錄頁面。 我正在重定向到登錄頁面，因為使用 state 我沒有獲得任何價值。

const dispatch = useDispatch()
    const navigate = useNavigate()

    const { user } = useSelector((state) => state.auth)

    const { orders, isLoading, isError, message } = useSelector(
        (state) => state.orders,
    )
    useEffect(() => {
        if (isError) {
            toast.error(message)
        }

        if (!user && !user.isAdmin) {
            navigate('/login')
        }

        dispatch(getOrder())

        return () => {
            dispatch(reset())
        }
    }, [user, isError, message, dispatch, navigate])

`

這是我的 orderSlice。 對於 getOrder Function `

const initialState = {
    orders: [],
    isError: false,
    isSuccess: false,
    isLoading: false,
    message: '',
}

export const getOrder = createAsyncThunk(
    'orders/getOrder',
    async (_, thunkAPI) => {
        try {
            const token = thunkAPI.getState().auth.user.token
            return await orderService.getOrder(token)
        } catch (error) {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString()
            return thunkAPI.rejectWithValue(message)
        }
    },
)

`

這是我的 orderService.js `

const getOrder = async (token) => {
    const config = {
        headers: {
            Authorization: `Bearer ${token}`,
        },
    }

    const response = await axios.get(API_URL, config)
    return response.data
}

` 我試圖從這些堆棧中解決

1. Javascript 中的授權 Bearer Token Header
2. 如何通過 header 的 header 調用 react redux 發送不記名令牌

Answer 1

您可以嘗試將令牌作為 thunk function（當前為“_”）的第一個參數傳遞，以確保它不是未定義的。 此外，您可以使用調試器來了解全局存儲的實際 state（或者只是將其記錄在您的組件中）。

最后，嘗試記錄返回 thunkApi.getState() function 的內容。