feature/1366_connect_FE_and_BE_to_generate_and_store_JWT_and_refresh_token-fe em FE_dev 3 anos atrás
| @@ -1,12 +1,22 @@ | |||
| import React from "react"; | |||
| import React, { useEffect } from "react"; | |||
| import { Router } from "react-router-dom"; | |||
| import { Helmet } from "react-helmet-async"; | |||
| import i18next from "i18next"; | |||
| import history from "./store/utils/history"; | |||
| import MainContainer from "./components/Section/MainContainer"; | |||
| import AppRoutes from "./AppRoutes"; | |||
| import { useDispatch } from "react-redux"; | |||
| import {refreshUserToken} from "./store/actions/login/loginActions"; | |||
| import { BASE_PAGE } from "./constants/pages"; | |||
| const App = () => { | |||
| // const { pathname } = useLocation(); | |||
| const dispatch = useDispatch() | |||
| useEffect(() => { | |||
| if(history.location.pathname === BASE_PAGE) | |||
| return; | |||
| dispatch(refreshUserToken()) | |||
| },[]) | |||
| return ( | |||
| <> | |||
| <Router history={history}> | |||
| @@ -40,17 +40,16 @@ const LoginPage = ({ history }) => { | |||
| const handleClickShowPassword = () => setShowPassword(!showPassword); | |||
| const handleMouseDownPassword = () => setShowPassword(!showPassword); | |||
| // When user refreshes page | |||
| // useEffect(() => { | |||
| // function redirectClient() { | |||
| // let token = localStorage.getItem("JwtToken") | |||
| // if (!token) { | |||
| // return; | |||
| // } | |||
| // handleApiResponseSuccess() | |||
| // } | |||
| // redirectClient(); | |||
| // }, [history]); | |||
| useEffect(() => { | |||
| function redirectClient() { | |||
| let token = localStorage.getItem("JwtToken") | |||
| if (!token) { | |||
| return; | |||
| } | |||
| handleApiResponseSuccess() | |||
| } | |||
| redirectClient(); | |||
| }, [history]); | |||
| const isLoading = useSelector( | |||
| selectIsLoadingByActionType(LOGIN_USER_LOADING) | |||
| @@ -1,5 +1,6 @@ | |||
| export default { | |||
| authentications: { | |||
| login: 'http://localhost:26081/v1/users/authenticate', | |||
| refreshToken:'http://localhost:26081/v1/users/refresh' | |||
| }, | |||
| }; | |||
| @@ -31,7 +31,7 @@ export const fetchUserError = (payload) => ({ | |||
| export const updateUserToken = (payload) => ({ | |||
| type: UPDATE_USER_JWT_TOKEN, | |||
| payload, | |||
| payload | |||
| }); | |||
| export const resetLoginState = () => ({ | |||
| @@ -50,8 +50,9 @@ export const logoutUser = () => ({ | |||
| type: LOGOUT_USER, | |||
| }); | |||
| export const refreshUserToken = () => ({ | |||
| export const refreshUserToken = (payload) => ({ | |||
| type: REFRESH_TOKEN, | |||
| payload | |||
| }); | |||
| export const generateToken = (payload) => ({ | |||
| @@ -2,27 +2,18 @@ import createReducer from '../../utils/createReducer'; | |||
| import { | |||
| CLEAR_LOGIN_USER_ERROR, | |||
| LOGIN_USER_ERROR, | |||
| LOGIN_USER_SUCCESS, | |||
| RESET_LOGIN_STATE, | |||
| UPDATE_USER_JWT_TOKEN, | |||
| GENERATE_TOKEN_SUCCESS, | |||
| GENERATE_TOKEN_ERROR, | |||
| } from '../../actions/login/loginActionConstants'; | |||
| const initialState = { | |||
| email: '', | |||
| token: { | |||
| RefreshToken: '', | |||
| JwtToken: '', | |||
| }, | |||
| errorMessage: '', | |||
| email: "", | |||
| errorMessage: "", | |||
| }; | |||
| export default createReducer( | |||
| { | |||
| [LOGIN_USER_SUCCESS]: setUser, | |||
| [UPDATE_USER_JWT_TOKEN]: setUserJwtToken, | |||
| [RESET_LOGIN_STATE]: resetLoginState, | |||
| [LOGIN_USER_ERROR]: setError, | |||
| [CLEAR_LOGIN_USER_ERROR]: clearLoginErrors, | |||
| @@ -32,24 +23,6 @@ export default createReducer( | |||
| initialState, | |||
| ); | |||
| function setUser(state, action) { | |||
| return { | |||
| ...state, | |||
| token: action.payload, | |||
| }; | |||
| } | |||
| function setUserJwtToken(state, action) { | |||
| return { | |||
| ...state, | |||
| token: { | |||
| ...state.token, | |||
| JwtToken: action.payload, | |||
| }, | |||
| }; | |||
| } | |||
| function setError(state, action) { | |||
| return { | |||
| ...state, | |||
| @@ -5,7 +5,12 @@ import { | |||
| } from '../../actions/user/userActionConstants'; | |||
| const initialState = { | |||
| user: {}, | |||
| id:"", | |||
| firstName:"", | |||
| lastName:"", | |||
| username:"", | |||
| token:"", | |||
| refreshToken:"" | |||
| }; | |||
| export default createReducer( | |||
| @@ -18,8 +23,12 @@ export default createReducer( | |||
| function setUser(state, action) { | |||
| return { | |||
| ...state, | |||
| user: action.payload, | |||
| id:action.payload.id, | |||
| firstName:action.payload.firstName, | |||
| lastName:action.payload.lastName, | |||
| username:action.payload.username, | |||
| token:action.payload.token, | |||
| refreshToken:action.payload.refreshToken, | |||
| }; | |||
| } | |||
| @@ -20,7 +20,7 @@ import { | |||
| resetLoginState, | |||
| updateUserToken, | |||
| } from '../actions/login/loginActions'; | |||
| import { LOGIN_PAGE } from '../../constants/pages'; | |||
| import { LOGIN_PAGE,BASE_PAGE } from '../../constants/pages'; | |||
| import { setUser } from '../actions/user/userActions'; | |||
| import { | |||
| addHeaderToken, | |||
| @@ -46,13 +46,12 @@ import { rejectErrorCodeHelper } from '../../util/helpers/rejectErrorCodeHelper' | |||
| function* fetchUser({ payload }) { | |||
| try { | |||
| const { data } = yield call(attemptLogin, payload); | |||
| if (data.token) { | |||
| const user = jwt.decode(data.token); | |||
| if (data) { | |||
| //const user = jwt.decode(data.token); | |||
| yield call(authScopeSetHelper, JWT_TOKEN, data.token); | |||
| yield call(authScopeSetHelper, JWT_REFRESH_TOKEN, data.JwtRefreshToken); | |||
| yield call(authScopeSetHelper, REFRESH_TOKEN_CONST, data.RefreshToken); | |||
| yield call(authScopeSetHelper, REFRESH_TOKEN_CONST, data.refreshToken); | |||
| yield call(addHeaderToken, data.token); | |||
| yield put(setUser(user)); | |||
| yield put(setUser(data)); | |||
| } | |||
| yield put(fetchUserSuccess(data)); | |||
| if (payload.handleApiResponseSuccess) { | |||
| @@ -109,28 +108,23 @@ function* logoutUser() { | |||
| export function* refreshToken() { | |||
| try { | |||
| const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN); | |||
| const JwtRefreshToken = yield call( | |||
| authScopeStringGetHelper, | |||
| JWT_REFRESH_TOKEN, | |||
| ); | |||
| const token = yield call(authScopeStringGetHelper, JWT_TOKEN); | |||
| const refreshToken = yield call(authScopeStringGetHelper,REFRESH_TOKEN_CONST); | |||
| if (JwtToken && JwtRefreshToken) { | |||
| if (token && refreshToken) { | |||
| const { data } = yield call(refreshTokenRequest, { | |||
| JwtRefreshToken, | |||
| JwtToken, | |||
| refreshToken, | |||
| token, | |||
| }); | |||
| yield call(authScopeSetHelper, JWT_TOKEN, data.JwtToken); | |||
| yield call(authScopeSetHelper, JWT_REFRESH_TOKEN, data.JwtRefreshToken); | |||
| const user = jwt.decode(data.JwtToken); | |||
| addHeaderToken(data.JwtToken); | |||
| yield put(setUser(user)); | |||
| yield put(updateUserToken(data.JwtToken)); | |||
| yield call(authScopeSetHelper, JWT_TOKEN, data.data.token); | |||
| addHeaderToken(data.data.token); | |||
| yield put(setUser(data.data)); | |||
| } | |||
| } catch (error) { | |||
| yield call(logoutUser); | |||
| console.log(error); // eslint-disable-line | |||
| localStorage.removeItem(JWT_TOKEN) | |||
| localStorage.removeItem(REFRESH_TOKEN_CONST) | |||
| yield call(history.replace, BASE_PAGE); | |||
| } | |||
| } | |||
| @@ -9,10 +9,6 @@ export function authScopeGetHelper(key) { | |||
| } | |||
| export function authScopeStringGetHelper(key) { | |||
| if (sessionStorage.getItem(SESSION_STORAGE_SCOPE)) { | |||
| return sessionStorage.getItem(key); | |||
| } | |||
| return localStorage.getItem(key); | |||
| } | |||