220805 공통 프로젝트 개발일지

·2022년 8월 7일
0

개발일지 & 회고

목록 보기
8/72
post-thumbnail

필요한 slice 세팅하기

createSlice는 리덕스가 상태관리해야하는 데이터들을 분할하여 코드를 작성할 수 있도록 도와준다. 먼저, user 정보를 담는 user-slice와 로그인 상태와 토큰 값을 저장할 auth-slice를 만들어보았다. 이를 통대로 thunk를 활용하여 로그인, 유저 정보, 유저 언어 정보 api를 연결을 완료했다. 서버로 부터 access-token을 받는 기점부터, 상단 네비게이션 바가 로그인 형태로 변화하고, 모든 api 접근이 authorization 속성으로 redux auth-slice에 저장된 access-token이 실려 간다. 기한이 지난 토큰은 재발급을 받아야하므로, 매 지정 시간마다 새로운 토큰을 발급받는 함수도 만들어두는게 좋을 거 같다.

일단 access-token의 기본 기한은 30분이다. setInterval을 통해 매 10분마다, 서버에 요청하여 token이 유효한지 체크하려고 한다. (이게 맞나?)

아쉽게도 아직 서버의 refresh-token이 에러를 나타내고 있기에, 토큰 관련 api는 서버 에러가 먼저 해결이 되면 봐야 할 거 같다.

// auth-slice
import { createSlice } from '@reduxjs/toolkit'
import { login, validToken } from './auth-thunkActions'

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    isAuthenticated: false,
    token: undefined,
    isError: false,
    message: undefined,
  },
  extraReducers: {
    // [login.pending]: () => {
    //   return
    // },
    [login.fulfilled]: (state, { payload }) => {
      state.isAuthenticated = true
      state.token = payload.data.accessToken
    },
    [login.rejected]: (state, { payload }) => {
      state.isError = true
      state.message = payload.message
    },
    [validToken.pending]: () => {
      return
    },
    [validToken.fulfilled]: (state, { payload }) => {
      state.token = payload.token
    },
    [validToken.rejected]: (state, { payload }) => {
      state.isError = true
      state.message = payload.message
    },
  },
})

export const authActions = authSlice.actions
export default authSlice
// auth-thunkActions
import { createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios'

export const login = createAsyncThunk('auth/login', async userData => {
  try {
    const response = await axios.post(
      '서버주소/api/v1/auth/signin',
      {
        email: userData.email,
        pw: userData.password,
      },
    )
    return response.data
  } catch (error) {
    console.log(error)
  }
})

export const validToken = createAsyncThunk('auth/validToken', async token => {
  try {
    const response = await axios.post(
      '서버주소/api/v1/auth/reissue',
      {
        refreshToken: token,
      },
    )
    return response.data
  } catch (error) {
    console.log(error)
  }
})

유저 데이터 이슈

유저 데이터를 반영하는데 필요한, 한줄 소개, 하트, 국적, 프로필 이미지를 받아올 수 없는 상황이다. 이 역시 서버 확장이 완료될 때 까지 미루어야 할 거 같다.

profile
새로운 것에 관심이 많고, 프로젝트 설계 및 최적화를 좋아합니다.

0개의 댓글