feat(auth): token interceptor

apps/api/src/auth/auth.controller.ts

@@ -1,6 +1,7 @@
-import { AuthTokenDto, UserDto } from '@app/dto';
-import { Controller, Get, Post, Request, UseGuards } from '@nestjs/common';
+import { AuthRefreshRequestDto, AuthTokenDto, UserDto } from '@app/dto';
+import { Controller, Get, Post, Req, UseGuards } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
+import { Request } from 'express';
 import { AuthService } from './auth.service';
 
 @Controller()
@@ -9,18 +10,19 @@ export class AuthController {
 
  @UseGuards(AuthGuard('local'))
  @Post('auth')
- async authenticate(@Request() req): Promise<AuthTokenDto> {
+ async authenticate(@Req() req): Promise<AuthTokenDto> {
  return this.authService.issueToken(req.user);
  }
 
  @Post('auth/refresh')
- async refresh(@Request() req): Promise<AuthTokenDto> {
- return this.authService.refreshAccessToken(req.body.refreshToken);
+ async refresh(@Req() req: Request): Promise<AuthTokenDto> {
+ const body: AuthRefreshRequestDto = req.body;
+ return this.authService.refreshAccessToken(body.refreshToken);
  }
 
  @UseGuards(AuthGuard())
  @Get('me')
- async currentUser(@Request() req): Promise<UserDto> {
+ async currentUser(@Req() req): Promise<UserDto> {
  return req.user;
  }
 }

apps/api/src/auth/auth.service.ts

@@ -41,19 +41,19 @@ export class AuthService {
  };
  }
 
- async refreshAccessToken(refresh: string): Promise<AuthTokenDto> {
- if (!refreshTokens.includes(refresh)) {
+ async refreshAccessToken(refreshToken: string): Promise<AuthTokenDto> {
+ if (!refreshTokens.includes(refreshToken)) {
  throw new UnauthorizedException();
  }
 
  try {
- const { login, sub } = this.jwtService.verify<JwtClaimsDto>(refresh);
+ const { login, sub } = this.jwtService.verify<JwtClaimsDto>(refreshToken);
 
  // TODO consider issuing a new refresh token and invalidating the previous one
 
  return {
  access: this.jwtService.sign({ login, sub }),
- refresh,
+ refresh: refreshToken,
  };
  } catch (e) {
  if (e.name === 'TokenExpiredError') {

apps/web/public/config/app.default.json

@@ -1,3 +1,3 @@
 {
- "API_URL": "http://localhost:3000/api"
+ "API_URL": "http://localhost:3000"
 }

apps/web/src/modules/auth/index.ts

@@ -1,9 +1,40 @@
+import { AuthTokenDto } from '@app/dto';
+import axios from 'axios';
 import { appInitializer } from '~app/core';
+import router from '~app/core/router';
 import store from '~app/core/store';
-import { tokenInitializer } from './domain/token';
-import './routes';
-import { AUTH_NAMESPACE, authStore } from './store';
+import { AuthRoute, authRoutes } from './routes';
+import { authTokenInterceptor, refreshTokenInterceptor } from './service';
+import { AUTH_NAMESPACE, authActions, authGetters, authStore } from './store';
 
 store.registerModule(AUTH_NAMESPACE, authStore);
+store.watch(
+ (state, getters) => getters[authGetters.token],
+ (token: AuthTokenDto) => {
+ if (!token) {
+ return router.push({ name: AuthRoute.LOGIN, query: { back: router.currentRoute.fullPath } });
+ }
+ },
+);
 
-appInitializer.register(tokenInitializer);
+appInitializer.register(() => store.dispatch(authActions.loadToken));
+
+axios.interceptors.request.use(authTokenInterceptor);
+axios.interceptors.response.use(
+ (response) => response,
+ (error) => refreshTokenInterceptor(error),
+);
+
+router.addRoutes(authRoutes);
+router.beforeEach((to, from, next) =>
+ appInitializer.resolve().then(() => {
+ const authRequired = to.matched.some((route) => route.meta.authRequired);
+ const loggedIn = store.getters[authGetters.loggedIn];
+
+ if (!authRequired || loggedIn) return next();
+
+ next({ name: AuthRoute.LOGIN, query: { back: to.fullPath } });
+ }),
+);
+
+export * from './service';

apps/web/src/modules/auth/routes.ts

@@ -1,6 +1,4 @@
-import { RawLocation, Route } from 'vue-router';
-import { appInitializer } from '~app/core';
-import router from '~app/core/router';
+import { RawLocation, Route, RouteConfig } from 'vue-router';
 import store from '~app/core/store';
 import { authActions, authGetters } from './store';
 
@@ -10,7 +8,7 @@ export enum AuthRoute {
  PROFILE = 'auth-profile',
 }
 
-router.addRoutes([
+export const authRoutes: RouteConfig[] = [
  {
  path: '/login',
  name: AuthRoute.LOGIN,
@@ -46,15 +44,4 @@ router.addRoutes([
  authRequired: true,
  },
  },
-]);
-
-router.beforeEach((to, from, next) => {
- appInitializer.resolve().then(() => {
- const authRequired = to.matched.some((route) => route.meta.authRequired);
- const loggedIn = store.getters[authGetters.loggedIn];
-
- if (!authRequired || loggedIn) return next();
-
- next({ name: AuthRoute.LOGIN, query: { back: to.fullPath } });
- });
-});
+];

apps/web/src/modules/auth/service/auth.api.ts

@@ -0,0 +1,21 @@
+import { AuthProfileDto, AuthRefreshRequestDto, AuthRequestDto, AuthTokenDto } from '@app/dto';
+import axios from 'axios';
+
+export function authenticate(login: string, password: string): Promise<AuthTokenDto> {
+ return axios
+ .post<AuthTokenDto>('/api/auth', { login, password } as AuthRequestDto)
+ .then((res) => res.data)
+ .catch((res) => {
+ throw res.response;
+ });
+}
+
+export function refreshToken(refreshToken: string): Promise<AuthTokenDto> {
+ return axios
+ .post<AuthTokenDto>('/api/auth/refresh', { refreshToken } as AuthRefreshRequestDto)
+ .then((res) => res.data);
+}
+
+export function fetchAuthProfile(): Promise<AuthProfileDto> {
+ return axios.get<AuthProfileDto>('/api/me').then((res) => res.data);
+}

apps/web/src/modules/auth/service/index.ts

@@ -0,0 +1,2 @@
+export * from './auth.api';
+export * from './token.interceptor';

apps/web/src/modules/auth/service/token.interceptor.ts

@@ -0,0 +1,29 @@
+import { AuthTokenDto } from '@app/dto';
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
+import store from '~app/core/store';
+import { authActions, authGetters } from '../store';
+
+export function authTokenInterceptor(request: AxiosRequestConfig): Promise<AxiosRequestConfig> {
+ const token: AuthTokenDto = store.getters[authGetters.token];
+ if (token) {
+ request.headers.Authorization = `Bearer ${token.access}`;
+ }
+
+ return Promise.resolve(request);
+}
+
+let _tokenRefreshRequest: Promise<AxiosResponse> | void;
+
+export function refreshTokenInterceptor(error: AxiosError): Promise<AxiosResponse> {
+ if (error.response?.status === 401 && !error.config.url?.includes('auth')) {
+ if (!_tokenRefreshRequest) {
+ _tokenRefreshRequest = store.dispatch(authActions.refreshToken);
+ }
+
+ return _tokenRefreshRequest
+ .then(() => axios.request(error.config))
+ .finally(() => (_tokenRefreshRequest = void 0));
+ }
+
+ throw error;
+}

apps/web/src/modules/auth/service/token.storage.ts

@@ -0,0 +1,19 @@
+import { AuthTokenDto } from '@app/dto';
+
+export const TOKEN_STORAGE_KEY = 'auth_token';
+
+export function storeToken(token: AuthTokenDto): Promise<void> {
+ return Promise.resolve().then(() => {
+ if (!token) {
+ localStorage.removeItem(TOKEN_STORAGE_KEY);
+ return;
+ }
+
+ localStorage.setItem(TOKEN_STORAGE_KEY, JSON.stringify(token));
+ });
+}
+
+export function loadStoredToken(): Promise<AuthTokenDto> {
+ const token = localStorage.getItem(TOKEN_STORAGE_KEY);
+ return Promise.resolve(token ? JSON.parse(token) : void 0);
+}

apps/web/src/modules/auth/store/actions.ts

@@ -1,33 +1,67 @@
+import { AxiosError } from 'axios';
 import { RootState } from '~app/core/store';
 import { createActionFactory } from '~app/shared/store';
-import { authenticate } from '../domain/auth.api';
-import { loadStoredToken } from '../domain/token';
-import { authGetters, authMutations } from './index';
+import { authenticate, fetchAuthProfile, refreshToken } from '../service/auth.api';
+import { loadStoredToken, storeToken } from '../service/token.storage';
+import { authMutations } from './index';
 import { AuthState } from './state';
 
 export interface LoginPayload {
  login: string;
  password: string;
 }
 
+enum AuthAction {
+ LOAD_TOKEN = 'loadToken',
+ STORE_TOKEN = 'storeToken',
+ REFRESH_TOKEN = 'refreshToken',
+ LOGIN = 'login',
+ LOGOUT = 'logout',
+ FETCH_PROFILE = 'fetchProfile',
+}
+
 const createAction = createActionFactory<AuthState, RootState>();
 
 export const actions = {
- loadToken: createAction(({ commit }) => {
- return loadStoredToken().then((token) => commit(authMutations.setToken, token, { root: true }));
+ [AuthAction.LOAD_TOKEN]: createAction(({ commit }) =>
+ loadStoredToken().then((token) => commit(authMutations.setToken, token, { root: true })),
+ ),
+
+ [AuthAction.STORE_TOKEN]: createAction(({ commit }, token) => {
+ return storeToken(token).then(() => {
+ commit(authMutations.setToken, token, { root: true });
+ });
  }),
 
- login: createAction(({ commit, getters }, { login, password }: LoginPayload) => {
- if (getters[authGetters.loggedIn]) {
- return;
+ [AuthAction.REFRESH_TOKEN]: createAction(({ state, dispatch }) => {
+ if (!state.token?.refresh) {
+ return Promise.reject(new Error('No refresh token'));
  }
 
- return authenticate(login, password).then((token) =>
- commit(authMutations.setToken, token, { root: true }),
- );
+ return refreshToken(state.token.refresh)
+ .then((token) => dispatch(AuthAction.STORE_TOKEN, token))
+ .catch((e: AxiosError) => {
+ if (e.response?.status === 401) {
+ return dispatch(AuthAction.LOGOUT).then(() => {
+ throw e;
+ });
+ }
+
+ throw e;
+ });
  }),
 
- logout: createAction(({ commit }) => {
- commit(authMutations.setToken, null, { root: true });
+ [AuthAction.LOGIN]: createAction(({ dispatch }, { login, password }: LoginPayload) =>
+ authenticate(login, password).then((token) => dispatch(AuthAction.STORE_TOKEN, token)),
+ ),
+
+ [AuthAction.LOGOUT]: createAction(({ commit, dispatch }) =>
+ dispatch(AuthAction.STORE_TOKEN, void 0).then(() =>
+ commit(authMutations.setProfile, void 0, { root: true }),
+ ),
+ ),
+
+ [AuthAction.FETCH_PROFILE]: createAction(({ commit }) => {
+ return fetchAuthProfile().then((res) => commit(authMutations.setProfile, res, { root: true }));
  }),
 };

apps/web/src/modules/auth/store/getters.ts

@@ -5,5 +5,7 @@ import { AuthState } from './state';
 const createGetter = createGetterFactory<AuthState, RootState>();
 
 export const getters = {
- loggedIn: createGetter((state): boolean => !!state.token),
+ token: createGetter((state) => state.token),
+ loggedIn: createGetter((state) => !!state.token),
+ profile: createGetter((state) => state.profile),
 };

apps/web/src/modules/auth/store/mutations.ts

@@ -1,13 +1,14 @@
-import { AuthTokenDto } from '@app/dto';
+import { AuthProfileDto, AuthTokenDto } from '@app/dto';
 import { createMutationFactory } from '~app/shared/store';
-import { storeToken } from '../domain/token';
 import { AuthState } from './state';
 
 const createMutation = createMutationFactory<AuthState>();
 
 export const mutations = {
  setToken: createMutation((state, token: AuthTokenDto) => {
- storeToken(token);
  state.token = token;
  }),
+ setProfile: createMutation((state, profile: AuthProfileDto) => {
+ state.profile = profile;
+ }),
 };

apps/web/src/modules/auth/store/state.ts

@@ -1,19 +1,13 @@
-import { AuthTokenDto } from '@app/dto';
-
-// TODO interface shared with backend
-export interface User {
- id: number;
- name: string;
-}
+import { AuthProfileDto, AuthTokenDto } from '@app/dto';
 
 export interface AuthState {
- token: AuthTokenDto | null;
- user: User | null;
+ token?: AuthTokenDto;
+ profile?: AuthProfileDto;
 }
 
 export function initialAuthState(): AuthState {
  return {
- token: null,
- user: null,
+ token: void 0,
+ profile: void 0,
  };
 }

apps/web/src/modules/auth/views/login.vue

@@ -105,7 +105,8 @@ export default Vue.extend({
  this.$router.push(back || { name: 'home' });
  })
  .catch((e) => {
- this.error = e.status === 401 ? 'Wrong login and/or password' : 'Unexpected server error';
+ this.error =
+ e?.status === 401 ? 'Wrong login and/or password' : 'Unexpected server error';
  });
  },
  },