is it possible to use if statement in calling REST api? - reactjs

Question

OS : Window 10
IDE TOOLS : VSC
node : v12.14.1
Hi i'm not good at English. so my expressions will be little bit awkward.
I'm using Spring boot REST API and client-side is react.js
I'm trying to use refresh Token, Access Token with jwt.
What i want to do is,
Before calling rest api, If accessToken is invalid with timeout in client side,
get Requesttoken in localStorage and send it to serverside and reinssuance accessToken and refreshToken.
And store it again. Then i call rest api what i want to call it first.
Here is my question.
Is it possible that Rest api has if statement ?
api.js
const getAccessToken = () => {
const accessToken = sessionStorage.getItem('accessToken');
if (!accessToken) {
window.location.href = "http://localhost:3000";
return alert('Login first');
} else if (accessToken && !validateToken()) {
// ~~~~ Here is what i want to ask~~~~
is it possible in react.js???
const refreshToken = localStorage.getItem("refreshToken");
getAtWithRefreshToken(refreshToken);
sessionStorage.setItem('')
return accessToken;
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
} else if (accessToken && validateToken()) {
console.log("token is Valid~~~");
return accessToken;
}}
export const getBoardList = (searchType = '', searchString = '', page) =>
axios.get("http://localhost:8080/jpa/board/",
{
params: {
searchType,
searchString,
page
},
headers: {
'Authorization': getAccessToken()
}
}
)
This is my first Question in StackOverFlow... Please Let me know in the comments if there is anything I need to explain.
Sorry you for you that spend many time in my promiscuous question.
Hope you guys always in healthy.
+ api.js
getAtwithRefreshToken
export const getAtWithRefreshToken = (refreshToken) =>
axios.post("http://localhost:8080/jpa/system/getat",
{
refreshToken
}
)
and in module,
export default handleActions({
..(another pender)....
...pender({
type: GET_AT, // getAtWithRefreshToken
onPending: (state, action) => {
return state; // do something
},
onSuccess: (state, action) => {
const result = action.payload.data.data;
sessionStorage.setItem('role', result.role);// role : [ROLE_ADMIN]
sessionStorage.setItem('accessToken', result.accessToken);
sessionStorage.setItem('memberId', result.memberId); // id : admin
localStorage.setItem('refreshToken', result.refreshToken);
return state
},
onFailure: (state, action) => {
alert(action);
console.log(action);
return state; // do something
}
}),
..(another pender)....
, initialState);
and in container, i uses terrible thing like....
getBoardList = async (searchType, searchString, page, size, direction) => {
this.getAccessToken();
const { boardActions } = this.props;
try {
this.getAccessToken();
await boardActions.getBoardList(searchType, searchString, page, size);
} catch (e) {
console.log("error log :" + e);
}
this.getBoardCount(searchType, searchString);
}
and my page shows
Unhandled Rejection (InvalidTokenError):
Invalid token specified: Cannot read property 'replace' of undefined
such a mess. my brain stopped... :(