#9 connect FE and BE to generate and store JWT and refresh token

已合併
Dzenis 3 年之前 將 1 次代碼提交從 feature/1366_connect_FE_and_BE_to_generate_and_store_JWT_and_refresh_token-fe合併至 FE_dev

+ 12
- 2
src/App.js 查看文件

@@ -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}>

+ 10
- 11
src/pages/LoginPage/LoginPageMUI.js 查看文件

@@ -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
- 0
src/request/apiEndpoints.js 查看文件

@@ -1,5 +1,6 @@
export default {
authentications: {
login: 'http://localhost:26081/v1/users/authenticate',
refreshToken:'http://localhost:26081/v1/users/refresh'
},
};

+ 3
- 2
src/store/actions/login/loginActions.js 查看文件

@@ -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
- 29
src/store/reducers/login/loginReducer.js 查看文件

@@ -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,

+ 12
- 3
src/store/reducers/user/userReducer.js 查看文件

@@ -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,
};
}


+ 16
- 22
src/store/saga/loginSaga.js 查看文件

@@ -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);
}
}


+ 0
- 4
src/util/helpers/authScopeHelpers.js 查看文件

@@ -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);
}


Loading…
取消
儲存