feat: add ACCESS_TOKEN_NAME and ACCESS_TOKEN_COOKIE_NAME of constants

Author: hisasann

src/common/constants/api.ts

@@ -25,12 +25,17 @@ export const API_ENDPOINT = {
 }
 
 /** アクセストークンヘッダ名 - API サーバーとのログインセッション用のトークン名 */
-export const ACCESS_TOKEN_NAME = 'access-token'
+export const ACCESS_TOKEN_NAME = 'x-authorization-code'
+
+/** アクセストークン Cookie 名 - API サーバーからのトークンを保存する先の Cookie 名 */
+export const ACCESS_TOKEN_COOKIE_NAME = 'x-authorization-code'
 
 /** HTTP ステータス */
 export const HTTP_STATUS = {
   /** OK */
   OK: 200,
   /** 認証が必要である */
-  UNAUTHORIZED: 401
+  UNAUTHORIZED: 401,
+  /** サービス利用不可 */
+  SERVICE_UNAVAILABLE: 503
 }

src/utilities/auth.ts

@@ -1,30 +1,51 @@
+/**
+ * @file Cookieのユーティリティを集めたクラス
+ */
+
 import Cookie from 'js-cookie'
+import { ACCESS_TOKEN_COOKIE_NAME } from '@/common/constants/'
 
+/**
+ * token を cookie に保存します
+ * @param token
+ */
 export const setToken = (token: string): void => {
-  Cookie.set('token', token)
+  Cookie.set(ACCESS_TOKEN_COOKIE_NAME, token)
 }
 
+/**
+ * token を cookie から削除します
+ */
 export const unsetToken = (): void => {
-  Cookie.remove('token')
+  Cookie.remove(ACCESS_TOKEN_COOKIE_NAME)
   window.localStorage.setItem('logout', Date.now() + '')
 }
 
+/**
+ * token を cookie から取得します
+ * SSR 時はリクエストヘッダーから、 CSR 時は cookie から取得します
+ * @param req
+ */
 export const getTokenFromCookie = (req?: any): string | undefined => {
   // SSR
   if (req && req.headers.cookie) {
     console.log('req.headers.cookie:', req.headers.cookie)
     const cookie: string = req.headers.cookie
       .split(';')
-      .find((c: string): boolean => c.trim().startsWith('token='))
+      .find(
+        (c: string): boolean =>
+          c.trim().startsWith(`${ACCESS_TOKEN_COOKIE_NAME}=`)
+      )
 
     if (!cookie) {
       return undefined
     }
 
     const token = cookie.split('=')[1]
-    return token
+    // NOTE: req.headers.cookie から抜き取った cookie は URL エンコードされているため、スペースが %20 にエンコードされているので、デコードする
+    return decodeURIComponent(token)
   }
 
   // CSR
-  return Cookie.get('token')
+  return Cookie.get(ACCESS_TOKEN_COOKIE_NAME)
 }

tools/server.js

@@ -1,6 +1,8 @@
 const express = require('express')
 const app = express()
 
+const ACCESS_TOKEN_NAME = 'x-authorization-code'
+
 // https://blog.ryo4004.net/web/306/
 // method: post のために必須
 const bodyParser = require('body-parser')
@@ -16,13 +18,16 @@ app.use((req, res, next) => {
     'Access-Control-Allow-Headers',
     // Chrome は OK で、 Firefox と IE11 がダメだったため、
     // '*' だと CORS 的に許可されないので、明示的にリクエストヘッダーの key 名を許可しています
-    'origin, x-requested-with, content-type, accept, post-header, common-header, header1, access-token, X-User-Agent, X-Referer'
+    `origin, x-requested-with, content-type, accept, post-header, common-header, header1, ${ACCESS_TOKEN_NAME}, X-User-Agent, X-Referer`
     // '*'
   )
   // https://stackoverflow.com/questions/37897523/axios-get-access-to-response-header-fields
   // https://github.com/axios/axios/issues/606
   // Access-Control-Expose-Headers を追加しないとカスタムレスポンスヘッダーをブラウザに返すことはできない
-  res.header('Access-Control-Expose-Headers', 'from-server, access-token')
+  res.header(
+    'Access-Control-Expose-Headers',
+    `from-server, ${ACCESS_TOKEN_NAME}`
+  )
   next()
 })
 
@@ -112,7 +117,7 @@ app.post('/login', (req, res) => {
   const id = uuid()
   console.log('uuid:', id)
   res.set({
-    'access-token': id
+    [ACCESS_TOKEN_NAME]: id
   })
 
   res.send(
@@ -132,7 +137,7 @@ app.post('/logout', (req, res) => {
 
   // カスタムレスポンスヘッダーをセットします
   res.set({
-    'access-token': ''
+    [ACCESS_TOKEN_NAME]: ''
   })
 
   res.send(
@@ -146,7 +151,7 @@ app.post('/logout', (req, res) => {
  * post '/login-check'
  */
 app.post('/login-check', (req, res) => {
-  if (!req.headers['access-token']) {
+  if (!req.headers[ACCESS_TOKEN_NAME]) {
     console.log('not login')
     res.send(
       JSON.stringify({
@@ -162,7 +167,7 @@ app.post('/login-check', (req, res) => {
   const id = uuid()
   console.log('uuid:', id)
   res.set({
-    'access-token': id
+    [ACCESS_TOKEN_NAME]: id
   })
 
   res.send(