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