Блог

Я хочу создать аутентификацию с помощью 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 (указывающую на нечитаемый токен). Эта проблема, похоже, будет решена, если я напишу токен для каждого запроса. Но запросов, которые у меня есть, довольно много. Есть ли лучший способ сделать его короче и быстрее?