리액트 : 새로고침 시 로그인 유지

1. App.jsx

import { useEffect } from 'react';

import { useDispatch } from 'react-redux';

import { login } from 'redux/modules/authSlice';

import { __getLetters } from 'redux/modules/letters';

const { default: Router } = require('shared/Router');

function App() {

    const dispatch = useDispatch();

    const HasAccessToken = localStorage.getItem('accessToken');

    useEffect(() => {

        if (HasAccessToken) {

            const accessToken = localStorage.getItem('accessToken');

            const avatar = localStorage.getItem('avatar');

            const nickname = localStorage.getItem('nickname');

            const userId = localStorage.getItem('userId');

            const payload = { accessToken, avatar, nickname, userId };

            dispatch(login(payload));

        } else {

            dispatch(logout());

        }

    }, []);

    return <Router />;

}

export default App;

 

1) useEffect로 App이 실행될 때,

localStorage에 저장된 데이터들(accessToken, avatar, nickname, userId)를 payload로 전달

 

2) dispatch를 통해서 login 리덕스 모듈로 보내기

 

3) HasAccessToken 값으로 localStorage에 값이 있으면 login  / 없으면 logout으로 분기처리

새로고침시 로그인인경우 그대로 유지 & 로그아웃하면 새로고침하면 로그인창

 

2. authSlice.js

import { createSlice } from '@reduxjs/toolkit';

import { setAuthAPIAccessToken } from 'api/auth.api';

const initialState = {

    isLoggin: false,

    userId: localStorage.getItem('userId'),

    avatar: localStorage.getItem('avatar'),

    nickname: localStorage.getItem('nickname'),

};

const authSlice = createSlice({

    name: 'auth',

    initialState,

    reducers: {

        login: (state, action) => {

            const { userId, avatar, nickname, accessToken } = action.payload;

            localStorage.setItem('accessToken', accessToken);

            localStorage.setItem('userId', userId);

            localStorage.setItem('avatar', avatar);

            localStorage.setItem('nickname', nickname);

            setAuthAPIAccessToken(accessToken);

            state.isLoggin = true;

            state.userId = userId;

            state.avatar = avatar;

            state.nickname = nickname;

            state.accessToken = accessToken;

        },

        logout: (state, action) => {

            localStorage.clear();

            setAuthAPIAccessToken('');

            state.isLoggin = false;

        },

    },

});

export const { login, logout } = authSlice.actions;

export default authSlice.reducer;

 

1) 로그인 리듀서 부분에서 들어온 payload (accessToken, avatar, nickname, userId)를 다시 저장

 

2) state에 각각 데이터 반영.

 

 

 

 

 

끝.