diff --git a/frontend/app/common/constants.ts b/frontend/app/common/constants.ts index caf6d7f5..181d73fe 100644 --- a/frontend/app/common/constants.ts +++ b/frontend/app/common/constants.ts @@ -33,6 +33,12 @@ export const LS_SORT_KEY = '__remarkSort'; /** localstorage key for email of logged in user */ export const LS_EMAIL_KEY = '__remarkEmail'; +/** localstorage key for JWT token */ +export const LS_JWT = '__JWT'; + +/** Header name for jwt token */ +export const HEADER_X_JWT = 'X-JWT'; + export const THEMES: Theme[] = ['light', 'dark']; export const IS_MOBILE = /Android|webOS|iPhone|iPad|iPod|Opera Mini|Windows Phone/i.test(navigator.userAgent); diff --git a/frontend/app/common/fetcher.ts b/frontend/app/common/fetcher.ts index 04f3ede3..9c20f746 100644 --- a/frontend/app/common/fetcher.ts +++ b/frontend/app/common/fetcher.ts @@ -1,4 +1,4 @@ -import { BASE_URL, API_BASE } from './constants'; +import { BASE_URL, API_BASE, LS_JWT, HEADER_X_JWT } from './constants'; import { siteId } from './settings'; import { StaticStore } from './static_store'; import { getCookie } from './cookies'; @@ -50,6 +50,10 @@ const fetcher = methods.reduce>((acc, method) => { headers.append('Content-Type', contentType); } + if (localStorage.getItem(LS_JWT)) { + headers.append(HEADER_X_JWT, localStorage.getItem(LS_JWT) as string); + } + let rurl = `${basename}${url}`; const parameters: RequestInit = { @@ -80,6 +84,15 @@ const fetcher = methods.reduce>((acc, method) => { const timeDiff = (new Date().getTime() - timestamp) / 1000; StaticStore.serverClientTimeDiff = timeDiff; + // backend could update jwt in any time. so, we should handle it + if (res.headers.has(HEADER_X_JWT)) { + localStorage.setItem(LS_JWT, res.headers.get(HEADER_X_JWT) as string); + } + + if (res.status === 403 && localStorage.getItem(LS_JWT)) { + localStorage.removeItem(LS_JWT); + } + if (res.status >= 400) { if (httpErrorMap.has(res.status)) { const descriptor = httpErrorMap.get(res.status) || httpMessages.unexpectedError; diff --git a/frontend/app/store/user/actions.ts b/frontend/app/store/user/actions.ts index fab12283..561dc00d 100644 --- a/frontend/app/store/user/actions.ts +++ b/frontend/app/store/user/actions.ts @@ -2,7 +2,7 @@ import * as api from '@app/common/api'; import { User, BlockedUser, AuthProvider, BlockTTL } from '@app/common/types'; import { ttlToTime } from '@app/utils/ttl-to-time'; import getHiddenUsers from '@app/utils/get-hidden-users'; -import { LS_HIDDEN_USERS_KEY } from '@app/common/constants'; +import { LS_HIDDEN_USERS_KEY, LS_JWT } from '@app/common/constants'; import { setItem } from '@app/common/local-storage'; import { StoreAction } from '../index'; @@ -46,6 +46,8 @@ export const logIn = (provider: AuthProvider): StoreAction> export const logout = (): StoreAction> => async dispatch => { await api.logOut(); + localStorage.removeItem(LS_JWT); + dispatch(unsetCommentMode()); dispatch(setUser()); };