#84 feat: トークンが無効な場合にログイン画面に転送する

front/nuxt.config.js

@@ -86,6 +86,9 @@ export default {
     clientConfigs: {
       default: '~/plugins/apollo/client-config.ts',
     },
+    httpLinkOptions: {
+      credentials: 'omit',
+    },
   },
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)

front/package.json

@@ -20,6 +20,8 @@
     "@nuxtjs/axios": "^5.12.2",
     "@nuxtjs/pwa": "^3.0.2",
     "@types/faker": "^5.1.4",
+    "apollo-link": "^1.2.14",
+    "apollo-link-error": "^1.1.13",
     "core-js": "^3.6.5",
     "faker": "^5.1.0",
     "graphql": "^15.4.0",

front/pages/index.vue

@@ -90,11 +90,5 @@ export default {
     Logo,
     VuetifyLogo,
   },
-
-  apollo: {
-    users: {
-      query: users,
-    },
-  },
 }
 </script>

front/plugins/apollo/client-config.ts

@@ -1,14 +1,26 @@
-import { Context } from '@nuxt/types';
+import { Context } from '@nuxt/types'
+import { ApolloLink } from 'apollo-link'
+import { ApolloHelpers } from '@nuxtjs/apollo'
+import errorHandler from './error-handler'
 
-export default (context: Context) => {
-  const IS_USE_MOCK_SERVER: boolean = context.$config.IS_USE_MOCK_SERVER;
-  const MOCK_HTTP_ENDPOINT: string = context.$config.MOCK_HTTP_ENDPOINT;
-  const MOCK_BROWSER_HTTP_ENDPOINT: string = context.$config.MOCK_BROWSER_HTTP_ENDPOINT;
-  const HTTP_ENDPOINT: string = context.$config.HTTP_ENDPOINT;
-  const BROWSER_HTTP_ENDPOINT: string = context.$config.BROWSER_HTTP_ENDPOINT;
+export default (context: Context & { $apolloHelpers: ApolloHelpers }) => {
+  const IS_USE_MOCK_SERVER: boolean = context.$config.IS_USE_MOCK_SERVER
+  const MOCK_HTTP_ENDPOINT: string = context.$config.MOCK_HTTP_ENDPOINT
+  const MOCK_BROWSER_HTTP_ENDPOINT: string =
+    context.$config.MOCK_BROWSER_HTTP_ENDPOINT
+  const HTTP_ENDPOINT: string = context.$config.HTTP_ENDPOINT
+  const BROWSER_HTTP_ENDPOINT: string = context.$config.BROWSER_HTTP_ENDPOINT
+
+  const errorLink = errorHandler(context)
 
   return {
     httpEndpoint: IS_USE_MOCK_SERVER ? MOCK_HTTP_ENDPOINT : HTTP_ENDPOINT,
-    browserHttpEndpoint: IS_USE_MOCK_SERVER ? MOCK_BROWSER_HTTP_ENDPOINT : BROWSER_HTTP_ENDPOINT,
+    browserHttpEndpoint: IS_USE_MOCK_SERVER
+      ? MOCK_BROWSER_HTTP_ENDPOINT
+      : BROWSER_HTTP_ENDPOINT,
+    httpLinkOptions: {
+      credentials: 'omit',
+    },
+    link: ApolloLink.from([errorLink]),
   }
-};
+}

front/plugins/apollo/error-handler.ts

@@ -0,0 +1,25 @@
+import { Context } from '@nuxt/types'
+import { ApolloHelpers } from '@nuxtjs/apollo'
+import { GraphQLError } from 'graphql'
+import { onError } from 'apollo-link-error'
+
+export default (context: Context & { $apolloHelpers: ApolloHelpers }) => {
+  return onError(({ graphQLErrors }) => {
+    if (graphQLErrors) {
+      graphQLErrors.forEach(async (graphQLError: GraphQLError) => {
+        const category: string = graphQLError?.extensions?.category ?? ''
+        const message: string = graphQLError.message ?? ''
+        if (
+          category === 'authentication' &&
+          ~message.indexOf('Unauthenticated')
+        ) {
+          if (!process.server) {
+            await context.$apolloHelpers.onLogout()
+            location.reload()
+          }
+          await context.redirect('/login')
+        }
+      })
+    }
+  })
+}