feat(utils/request): add set and delete authorization token's methods

src/main.ts

@@ -3,6 +3,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store'
 
+import { request } from './services'
+import parseStorageGet from './utils/parse-storage-get'
+
+const token = parseStorageGet('user')?.token
+request.setAuthorizationHeader(token)
+
 createApp(App)
   .use(router)
   .use(store)

src/store/mutations.ts

@@ -1,6 +1,8 @@
 import { MutationTree } from 'vuex'
 import { Store } from './index'
 
+import { request } from '../services'
+
 export const MUTATION = {
   UPDATE_USER: 'UPDATE_USER',
 }
@@ -9,9 +11,11 @@ const mutations: MutationTree<Store> = {
   [MUTATION.UPDATE_USER] (state, user: User|null) {
     if (!user) {
       localStorage.removeItem('user')
+      request.deleteAuthorizationHeader()
       state.user = null
     } else {
       localStorage.setItem('user', JSON.stringify(user))
+      request.setAuthorizationHeader(user.token)
       state.user = user
     }
   },

src/utils/request.spec.ts

@@ -206,3 +206,38 @@ describe('# Request PATCH', function () {
     }))
   })
 })
+
+describe('# Authorization header', function () {
+  it('should add authorization header', async function () {
+    const token = 'token'
+    const request = new FetchRequest()
+    await request.setAuthorizationHeader(token)
+    await request.get('/path')
+
+    expect(global.fetch).toBeCalledWith('/path', expect.objectContaining({
+      headers: { Authorization: `Token ${token}` },
+    }))
+  })
+
+  it('should remove authorization header', async function () {
+    const token = 'token'
+    const request = new FetchRequest({
+      headers: { Authorization: `Token ${token}` },
+    })
+
+    await request.get('/path')
+
+    expect(global.fetch).toBeCalledTimes(1)
+    expect(global.fetch).toBeCalledWith('/path', expect.objectContaining({
+      headers: { Authorization: `Token ${token}` },
+    }))
+
+    await request.deleteAuthorizationHeader()
+    await request.get('/path')
+
+    expect(global.fetch).toBeCalledTimes(2)
+    expect(global.fetch).toBeCalledWith('/path', expect.objectContaining({
+      headers: { },
+    }))
+  })
+})

src/utils/request.ts

@@ -121,4 +121,13 @@ export default class FetchRequest {
     })
       .then(this.handleResponse)
   }
+
+  public setAuthorizationHeader (token: string): void {
+    if (!this.options.headers) this.options.headers = {}
+    this.options.headers.Authorization = `Token ${token}`
+  }
+
+  public deleteAuthorizationHeader (): void {
+    delete this.options?.headers?.Authorization
+  }
 }