#reactjs #typescript #axios #use-context #use-reducer
#реагирует на #машинописный текст #аксиос #использование-контекст #использование-редуктор
Вопрос:
Я хочу создать аутентификацию с помощью useContext
и useReducer
, здесь я создал контекст и редуктор.
Мой Контекст Аутентификации:
import React, { createContext, ReactNode, useReducer } from "react"; import { AuthReducer, IAction, IState } from "./AuthReducer"; const initialState = { username: localStorage.getItem('username') ? localStorage.getItem('username') : null, nickname: localStorage.getItem('nickname') ? localStorage.getItem('nickname') : null, token: localStorage.getItem('token') ? localStorage.getItem('token') : null, roles: [{ name: localStorage.getItem('role_name') ? localStorage.getItem('role_name') : null }], clinic: { id: localStorage.getItem('clinic_id') ? localStorage.getItem('clinic_id') : null }, isAuthenticated: localStorage.getItem('isAuthenticated') === 'true' ? true : false } interface IAuthProvider { children: ReactNode } export const AuthContext = createContextlt;{ state: IState, dispatch: React.Dispatchlt;IActiongt; }gt;({ state: initialState, dispatch: () =gt; { } }) export const AuthProvider: React.FClt;IAuthProvidergt; = ({ children }) =gt; { const [state, dispatch] = useReducer(AuthReducer, initialState) return ( lt;AuthContext.Provider value={{ state, dispatch }}gt; {children} lt;/AuthContext.Providergt; ) }
Это Мой Редуктор:
import axios from "axios" export interface IState { username: string | null nickname: string | null token: string | null clinic: { id: string | null } roles: { name: string | null }[] isAuthenticated: boolean } export interface IAction { type: 'LOGIN' | 'LOGOUT' payload?: any } export const AuthReducer = (state: IState, action: IAction) =gt; { switch (action.type) { case 'LOGIN': console.log('fungsi auth dijalankan...') localStorage.setItem('username', action.payload.username) localStorage.setItem('nickname', action.payload.nickname) localStorage.setItem('token', action.payload.token) localStorage.setItem('clinic_id', action.payload.clinic.id) for (let i in action.payload.roles) { localStorage.setItem(`role_name_${parseInt(i) 1}`, action.payload.roles[i].name) } localStorage.setItem('isAuthenticated', JSON.stringify(action.payload.isAuthenticated)) // axios.interceptors.request.use((config) =gt; { // const token = localStorage.getItem("token") // config.headers.Authorization = `Bearer ${token}` // return config // }) return { ...state, isAuthenticated: true, username: action.payload.username, token: action.payload.token } case 'LOGOUT': localStorage.clear() return { ...state, isAuthenticated: false, username: null, token: null } default: return state } }
Проблема в том, что каждый раз, когда я делаю запрос к api, он всегда выдает ошибку 401 (указывающую на нечитаемый токен). Эта проблема, похоже, будет решена, если я напишу токен для каждого запроса. Но запросов, которые у меня есть, довольно много. Есть ли лучший способ сделать его короче и быстрее?
Комментарии:
1. Для отправки некоторых данных вместе с каждым запросом, который вы можете использовать
cookies
. Вы пробовали их использовать?