Reactを使ってブログサイトを作る 04 - トークン管理

Last updated at 2024-12-30Posted at 2024-12-30

Reduxを使ったトークン管理

背景

Token（トークン）はユーザーのデータ識別子として、APIの権限管理において重要な役割を果たします。つまり、バックエンドでは多くのAPIが、現在のリクエストヘッダーにトークンデータが含まれているかどうかを確認し、正常にデータを返すかどうかを判断します。
Tokenはユーザーの識別データとして、多くのモジュールで共有する必要があります。Reduxを使用することで、状態の共有問題を簡単に解決できます。

実装方法

Redux内で、トークンを取得する非同期処理と、トークンを変更する同期処理を実装します。
Loginコンポーネントがactionを送信し、フォームデータを渡す役割を担います。

code

strore/modules/user.js

import { request } from '@/utils';
import {createSlice} from '@reduxjs/toolkit'
const userStore = createSlice({
name:'user',
initialState:{
token :''
    },
reducers:{  
setToken(state, action) {
state.token = action.payload
        }
    },
});
const  fetchLogin = (loginForm) =>{
return async (dispatch)=>{
const res = await request.post('/v1_0/authorizations',loginForm)
dispatch(setToken(res.data.token))
    }
}
const { setToken } = userStore.actions
const userReducer = userStore.reducer
export {setToken, fetchLogin}
export default userReducer;

store/index.js

import { configureStore } from '@reduxjs/toolkit'
import userReducer from './modules/user'
export default configureStore({
reducer: {
user: userReducer
  }
})

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import { RouterProvider } from 'react-router-dom'
import router from './router'
import {Provider} from 'react-redux'
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store = {store}>
<RouterProvider router={router} />
</Provider>
</React.StrictMode>
);