← Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축하기 #2 Nuxt와 Rails 간의 소통 테스트

개별 기사 페이지 만들기

$ mkdir pages/posts
$ touch pages/posts/_id.vue

pages/posts/_id.vue

<template>
  <v-layout
    column
    justify-center
    align-center
  >
    <v-flex
      xs12
      sm8
      md6
    >
      <v-card>
        <v-card-title class="headline">
          {{ post.subject }} - {{ post.user.name }}
        </v-card-title>
        <v-card-text>
          {{ post.body }}
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  validate ({ params }) {
    return /^\d+$/.test(params.id)
  },
  async asyncData ({ $axios, params }) {
    const response = await $axios.$get(`/v1/posts/${params.id}`)
    return {
      post: response.post
    }
  }
}
</script>

Nuxt에서는 위와 같이 pages/hoge/_id.vue로 하면 hoge/{id}와 같은 동적 페이지가 만들어집니다.

유효성 검사는 숫자 형식만 허용하도록 설정합니다. 아래 공식 문서 참조.
라우팅 - NuxtJS

그리고 asyncData 라고 하는 SSR용의 메소드로 v1/posts/${params.id} 로 하는 것으로, URL의 id 부분의 수치로부터 고정의 post를 취득하고 있는 것입니다.

이번에는 post의 값을 Vuex의 store에 저장하지 않았습니다.
store는 어쨌든 저장을 저장하는 곳이 아니라 다른 모듈이나 사이트 전체에서 사용할 필요가 있는지 생각하고, 그렇지 않으면 부주의하게 돌진하지 않는 것이 좋다.

만약 브라우저에서 아래와 같이 표시되면, 우선 OK입니다.

index에서 개별 페이지로 링크 설치

index에서 개별 페이지로 링크를 붙입니다.

pages/index.vue

       <v-card v-for="post in posts" :key="post.id">
         <v-card-title class="headline">
-          {{ post.subject }} - {{ post.user.name }}
+          <n-link :to="`/posts/${post.id}`">
+            {{ post.subject }} - {{ post.user.name }}
+          </n-link>
         </v-card-title>
         <v-card-text>

링크가 있습니다.

CORS 대책

이제 index에서 개별 페이지로 날아갑시다.



오류가 발생했습니까?
실은 이것이 에러 메세지 읽어도 원인이 특정하기 어렵게 상당히 어색한 것입니다.
이전에 이 문제의 대응책을 남겨두고 있었으므로, 자세한 것을 알고 싶은 분은 이하의 기사를.
Nuxt.js에서 URL 직접 두드릴 때 페이지가 표시되지만 nuxt-link 또는 브라우저 백에서 An error occurred가됩니다.

그런데 상기 기사에도 썼습니다만, 원인은 페이지 천이했을 경우는 SSR(서버 사이드 렌더링)가 아니고 CSR(클라이언트 사이드 렌더링)이 되기 때문에, CORS(오리진간 자원 공유)의 대책이 필요합니다.

nuxt.config.js

   ** Nuxt.js modules
   */
   modules: [
-    '@nuxtjs/axios'
+    '@nuxtjs/axios',
+    '@nuxtjs/proxy'
   ],
-  axios: {},
+  axios: {
+    proxy: true
+  },
+  proxy: {
+    '/v1/': {
+      target: 'https:/xxxxxxxxxxx.ap-northeast-1.amazonaws.com:8080/'
+    }
+  },

target을 Rails API 엔드포인트로 대체하십시오.

이 설정이 끝나면, index도 개별 페이지도, 브라우저 백이나 n-link(nuxt-link)에 의한 천이시도 정상적으로 표시될 것입니다.

계속

→ Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분을 구축하는 #4 가입 페이지 만들기
【 연재 목차로 】