[프론트]로그인 상태 유지 redux-persist

✍ 로그인 후 사용자 정보 관리

로그인 후 통신 응답으로 받은 사용자 정보를 다른 컴포넌트에서 활용할 수 있게 리덕스를 사용한다.

• features 폴더 > userSlice.js

export const userSlice = createSlice({
	name: 'user',
	initialState: {
		user : null,
	},
	reducers: {
		login: (state, action) => {
			state.user = action.payload;
		},
		logout: (state, action) => {
			state.user = null;
		},
	},
});

export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;

• app 폴더 > store.js

export const store = configureStore({
    reducer: {
        user: userReducer,
    },
});

• 로그인 컴포넌트

const dispath = useDispatch();
useEffect(() => {
        try {
            axios.get(`locahost:8080/api/oauth?code=${code}`) // code는 인가코드
            .then((res) => {
                const token = res.headers.authorization;
                window.localStorage.setItem('token', token);
                history('/intropage');
                dispath(
                    login({
                        username: res.data.kakaoNickname,
                        userEmail: res.data.kakaoEmail,
                        profile: res.data.kakaoProfileImg,
                        userId: res.data.kakaoId,
                    }) //user정보 redux로 저장
                );
            })
        } catch (e) {
            console.log(e);
            history('/');
        }
    }, [] );

로그인할 때 유저 정보를 dispatch하여 저장해준다

• 다른 컴포넌트

const user = useSelector(selectUser);
console.log(user.username);
console.log(user.userEmail);
console.log(user.profile);
console.log(user.userId);

useSelector를 활용해 다른 컴포넌트에서 리덕스를 통해 저장한 유저정보를 활용할 수 있게 한다

😧 이렇게 토큰은 localstorage에 유저 정보를 redux에 저장해주면 문제가 생긴다!! 화면을 새로고침해주면 자동으로 로그아웃이 된다

🧐 화면을 새로고침 했을 때 리덕스 정보가 초기화되는 것을 막아야 한다!!

✍ 새로고침해도 로그인 상태 유지

💡redux-persist 설치

npm install redux-persist

💡redux-persist 사용

• features폴더 > rootReducer.js 파일 생성

import { combineReducers } from "@reduxjs/toolkit";

const rootReducer = combineReducers({
    user: userReducer
})
export default rootReducer;

• app 폴더 > store.js 코드 수정

import { configureStore } from "@reduxjs/toolkit";
import {
    persistReducer,
    PERSIST,
    PURGE
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import logger from 'redux-logger';
import rootReducer from "../features/rootReducer";

const persistConfig = {
    key: 'root',
    version: 1,
    storage,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
export const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware(
            {
                serializableCheck: {
                    ignoredActions: [PERSIST, PURGE],
                },
            }
        ).concat(logger)
});

user 정보를 localstorage에 저장해 새로고침해도 user정보가 저장되어서 로그인 상태가 유지될 수 있게 redux-persist 활용한다