受付中
Django REST Framework + NextJS + redux(redux-persist) [ログイン状態の持続(stateの保持)]
Django
Next.js
初心者
2023/04/26 19:18
実現したいこと
ページリロードをしてもstateを保持してログイン状態が持続
するようにしたい。
発生している問題
Navigation.jsを {isAuthenticated ?} でログイン状態の時に表示が変わるように設定しているが、ページリロードをやページ遷移をすると stateがリセットされてしまい、表示が切り替わってしまう。
自分で試したこと
stateを保持するredux-persistを使用し、公式ページなどを参考にコードを書いてみました。
結果は、
ページ遷移にはログイン状態を保持することができましたが、
ページリロードをするとログイン状態を保持することができませんでした。
ご教授をお願いしたいです。
ソースコード
//src/reduser/store.jsx
import { configureStore } from '@reduxjs/toolkit'
import authSlice from './authSlice'
import postSlice from './postSlice'
//redux-persist設定
import storage from 'redux-persist/lib/storage'
import {
persistReducer,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from 'redux-persist'
const persistConfig = {
key: 'root',
storage,
}
const persistedReducer = persistReducer(persistConfig, authSlice)
const store = configureStore({
reducer: {
auth: persistedReducer,
post: postSlice,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
})
export default store
//pages/_app.jsx
//redux設定
import { Provider } from 'react-redux'
//redux-persist設定
import store from 'src/reducer/store'
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'
const persistor = persistStore(store)
function App({ Component, pageProps }){
return (
<Povider store={store}>
<PersistGate persistor={persistor}>
<Layout>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Component {...pageProps} />
</Layout>
</PersistGate>
</Provider>
);
}
//src/reducer/authSlice.jsx
import {
// アカウント登録
REGISTER_SUCCESS,
REGISTER_FAIL,
//ログイン
LOGIN_SUCCESS,
LOGIN_FAIL,
//アカウント情報取得
USER_SUCCESS,
USER_FAIL,
//リフレッシュトークン取得
REFRESH_SUCESS,
REFRESH_FAIL,
// 読み込み中
SET_AUTH_LOADING,
REMOVE_AUTH_LOADING,
//認証チェック
AUTHENTICATED_SUCCESS,
AUTHENTICATED_FAIL,
LOGOUT_SUCCESS,
} from 'actions/types'
const initialState = {
user: null,
isAuthenticated: null,
loading: false,
}
function authReducer(state = initialState, action) {
const { type, payload } = action
switch (type) {
// アカウント登録----------------------------------------------
case REGISTER_SUCCESS:
return {
...state,
}
case REGISTER_FAIL:
return {
...state,
}
//ログイン----------------------------------------------
case LOGIN_SUCCESS:
return {
...state,
isAuthenticated: true,
}
case LOGIN_FAIL:
return {
...state,
isAuthenticated: false,
}
//アカウント情報取得----------------------------------------------
case USER_SUCCESS:
return {
...state,
user: payload.user,
}
case USER_FAIL:
return {
...state,
user: null,
}
//リフレッシュトークン取得----------------------------------------------
case REFRESH_SUCESS:
return {
...state,
}
case REFRESH_FAIL:
return {
...state,
isAuthenticated: false,
user: null,
}
// 読み込み中----------------------------------------------
case SET_AUTH_LOADING:
return {
...state,
loading: true,
}
case REMOVE_AUTH_LOADING:
return {
...state,
loading: false,
}
// 認証チェック----------------------------------------------
case AUTHENTICATED_SUCCESS:
return {
...state,
isAuthenticated: true,
}
case AUTHENTICATED_FAIL:
return {
...state,
isAuthenticated: false
}
//ログアウト-----------------------------------------------
case LOGOUT_SUCCESS:
return {
...state,
isAuthenticated: false,
user: null,
}
case LOGIN_FAIL:
return {
...state,
}
default:
return state
}
}
export default authReducer
//
補足情報
回答 1件
回答するにはログインが必要です
ログイン時に、認証トークンをローカルストレージかクッキーに保存します。
リロード時に、保存した認証トークンを取得して、認証チェックをする必要がありますね。