Nuxt에서 Axios 시작하기

Nuxt.js는 애플리케이션과 쉽게 통합할 수 있도록 Axios 모듈을 제공합니다. Axios는 브라우저 및 Node.js 환경에서 작동하는 Promise 기반 HTTP 클라이언트입니다. 간단히 말해서 클라이언트 측 애플리케이션 및 Node.js 환경에서 요청(예: API 호출)을 하기 위한 도구입니다.

이 튜토리얼에서는 Axios 모듈을 사용하는 방법과 asyncData 및 fetch를 사용하여 서버 측에서 요청하는 방법을 배울 것입니다. 이 두 가지 방법은 서버 측에서 요청하지만 몇 가지 차이점이 있으며 이에 대해서도 다룰 것입니다. 마지막으로 auth 모듈과 auth 미들웨어를 사용하여 인증 및 보안 페이지/라우트를 수행하는 방법을 배웁니다.

이 기사에서는 Nuxtjs 및 Vuejs를 기반으로 구축할 기본 지식이 필요합니다. Vuejs에 대한 경험이 없는 경우 이 기사를 계속하기 전에 공식 문서와 Nuxt 공식 페이지에서 시작하는 것이 좋습니다.

Nuxt.js Axios 모듈이란 무엇입니까?

공식 문서에 따르면,

"Nuxt.js와의 안전하고 쉬운 Axios 통합입니다."

다음은 몇 가지 기능입니다.

1. 클라이언트 측 및 서버 측 기본 URL을 자동으로 설정합니다.
2. SSR의 프록시 요청 헤더(인증에 유용).
3. 스타일 요청을 가져옵니다.
4. 요청하는 동안 Nuxt.js Progressbar와 통합되었습니다.

애플리케이션에서 axios 모듈을 사용하려면 먼저 npm 또는 yarn 을 사용하여 설치해야 합니다.

실

 yarn add @nuxtjs/axios

NPM

 npm install @nuxtjs/axios

nuxt.config.js 파일에 추가합니다.

 modules: [ '@nuxtjs/axios', ], axios: { // extra config eg // BaseURL: 'https://link-to-API' }

modules 배열은 dotenv, auth 및 이 경우 Axios와 같은 Nuxt.js 모듈 목록을 허용합니다. 우리가 한 @nuxtjs/axios 를 사용하여 참조하는 Axios 모듈을 사용할 것임을 애플리케이션에 알리는 것입니다. 그런 다음 클라이언트 측과 서버 측 모두에 대한 baseURL과 같은 구성의 객체인 axios 속성이 뒤따릅니다.

이제 this.$axios.method 또는 this.$axios.$method $axios.$method를 호출하여 애플리케이션의 어느 곳에서나 Axios에 액세스할 수 있습니다. 여기서 메소드 는 get , post 또는 delete 입니다.

Axios를 사용하여 첫 번째 요청 만들기

이 튜토리얼에서는 Github에 간단한 애플리케이션을 만들었습니다. 리포지토리에는 시작 및 종료라는 두 개의 폴더가 있으며 시작 폴더에는 튜토리얼에 바로 들어가는 데 필요한 모든 것이 들어 있습니다. finish 폴더에는 우리가 만들 것의 완성된 버전이 들어 있습니다.

리포지토리를 복제하고 start 폴더를 연 후 package.json 파일에 모든 패키지를 설치해야 하므로 터미널을 열고 다음 명령을 실행합니다.

 npm install

완료되면 npm run dev 명령을 사용하여 앱을 시작할 수 있습니다. 이것은 localhost:3000 으로 이동했을 때 볼 수 있는 것입니다.

다음으로 해야 할 일은 애플리케이션의 루트 폴더에 .env 파일을 만들고 여기에 API URL을 추가하는 것입니다. 이 자습서에서는 사용자로부터 보고서를 수집하도록 빌드된 샘플 API를 사용합니다.

 API_URL=https://ireporter-endpoint.herokuapp.com/api/v2/

이렇게 하면 두 API(개발 및 프로덕션) 작업에 유용한 API를 앱에 하드 코딩할 필요가 없습니다.

다음 단계는 nuxt.config.js 파일을 열고 위에서 추가한 axios 구성에 환경 변수를 추가하는 것입니다.

 /* ** Axios module configuration */ axios: { // See https://github.com/nuxt-community/axios-module#options baseURL: process.env.API_URL, },

여기에서 우리는 이 Axios 모듈을 사용할 때마다 클라이언트 측 및 서버 측 요청 모두에 대해 이 baseURL 을 사용하도록 Nuxt.js에 지시합니다.

이제 보고서 목록을 가져오기 위해 index.vue 파일을 열고 스크립트 섹션에 다음 메서드를 추가합니다.

 async getIncidents() { let res = await this.$store.dispatch("getIncidents"); this.incidents = res.data.data.incidents; }

우리가 한 일은 getIncidents() 라고 하는 비동기 함수를 만들고 이름에서 이 함수가 무엇을 하는지 알 수 있는 것입니다. Vuex 저장소 작업 메서드 this.$store.dispatch 를 사용하여 사건 목록을 가져옵니다. 구성 요소에서 사용할 수 있도록 이 작업의 응답을 인시던트 속성에 할당합니다.

구성 요소가 마운트될 때마다 getIncidents() 메서드를 호출하려고 합니다. mounted 후크를 사용하여 그렇게 할 수 있습니다.

 mounted() { this.getIncidents() }

mounted() 는 구성 요소가 마운트될 때 호출되는 수명 주기 후크입니다. 그러면 구성 요소가 마운트될 때 API 호출이 발생합니다. 이제 스토어에 있는 index.js 파일로 이동하여 Axios 요청을 생성할 이 작업을 생성해 보겠습니다.

 export const actions = { async getIncidents() { let res = await this.$axios.get('/incidents') return res; } }

여기에서 비동기 함수인 getIncidents 라는 작업을 만든 다음 서버의 응답을 기다리고 이 응답을 반환합니다. 이 작업의 응답은 index.vue 파일의 getIncidents() 메서드로 다시 전송됩니다.

애플리케이션을 새로 고치면 이제 페이지에 렌더링된 긴 인시던트 목록을 볼 수 있습니다.

우리는 Axios를 사용하여 첫 번째 요청을 했지만 여기서 멈추지 않을 것입니다. 우리는 asyncData 를 시도하고 Axios를 사용하여 차이점을 확인하기 위해 fetch 것입니다.

비동기 데이터

AsyncData는 서버 측에서 데이터를 가져오고 페이지 구성 요소를 로드하기 전에 호출됩니다. 페이지 구성 요소 데이터가 생성되기 전에 호출되기 때문에 이에 대한 액세스 권한 this 없습니다. this created 후크가 호출된 후에만 사용할 수 있으므로 Nuxt.js는 반환된 데이터를 구성 요소의 데이터에 자동으로 병합합니다.

asyncData 를 사용하면 서버 측에서 사이트 콘텐츠를 가져오고 콘텐츠를 더 빠르게 로드하는 데 도움이 되므로 SEO에 좋습니다. asyncData 메서드는 구성 요소 폴더에서 작동하지 않으므로 응용 프로그램의 페이지 폴더에서만 사용할 수 있습니다. 컴포넌트가 생성되기 전에 asyncData 후크가 호출되기 때문입니다.

index.vue 파일에 asyncData 를 추가하고 인시던트 데이터 가 로드되는 속도를 관찰해 보겠습니다. component 속성 뒤에 다음 코드를 추가하고 마운트된 후크를 제거합니다.

 async asyncData({ $axios }) { let { data } = await $axios.get("/incidents"); return { incidents: data.data.incidents }; }, // mounted() { // this.getIncidents(); // },

여기에서 asyncData 메서드는 컨텍스트 $axios axios의 속성을 허용합니다. 이 속성을 사용하여 인시던트 목록을 가져오면 값이 반환됩니다. 이 값은 자동으로 컴포넌트에 주입됩니다. 이제 페이지를 새로고침하고 렌더링할 인시던트가 없는 경우 콘텐츠가 얼마나 빨리 로드되는지 알 수 있습니다.

술책

Fetch 메서드는 서버 측에서 요청하는 데에도 사용됩니다. 라이프 사이클에서 생성된 후크 이후에 호출되며 이는 구성 요소의 데이터에 액세스할 수 있음을 의미합니다. asyncData 메서드와 달리 fetch 메서드는 모든 .vue 파일에서 사용할 수 있으며 Vuex 저장소와 함께 사용할 수 있습니다. 즉, 데이터 함수에 다음이 있는 경우입니다.

 data() { return { incidents: [], id: 5, gender: 'male' }; }

this.id 또는 this.gender 를 호출하여 id 또는 성별 을 쉽게 수정할 수 있습니다.

Axios를 플러그인으로 사용하기

Axios로 개발하는 동안 애플리케이션이 의도한 대로 작동할 수 있도록 요청에 대한 인스턴스 및 인터셉터를 생성하는 것과 같은 추가 구성이 필요하다는 것을 알 수 있습니다. 고맙게도 Axios를 플러그인으로 확장하여 그렇게 할 수 있습니다.

axios 를 확장하려면 plugins 폴더에 플러그인(예: axios )을 만들어야 합니다.

 export default function ({ $axios, store, redirect }) { $axios.onError(error => { if (error.response && error.response.status === 500) { redirect('/login') } }) $axios.interceptors.response.use( response => { if (response.status === 200) { if (response.request.responseURL && response.request.responseURL.includes('login')) { store.dispatch("setUser", response); } } return response } ) }

이것은 내가 Nuxt 애플리케이션을 위해 작성한 플러그인의 예입니다. 여기에서 함수는 $axios 의 컨텍스트 개체를 가져와 플러그인 구성에 사용할 store 및 redirect 을 사용합니다. 가장 먼저 할 일은 $axios.onError 를 사용하여 상태가 500 인 오류를 수신하고 사용자를 로그인 페이지로 리디렉션하는 것입니다.

우리는 또한 우리가 받는 응답의 상태가 200 인지 확인하는 애플리케이션에서 우리가 만드는 모든 요청 응답을 가로채는 인터셉터가 있습니다. 그것이 사실이라면 계속 진행하여 response.request.responseURL 이 있고 로그인이 포함되어 있는지 확인합니다. 이것이 사실로 판명되면 우리는 우리 상태에서 변형된 상점의 디스패치 메소드를 사용하여 이 응답을 보냅니다.

이 플러그인을 nuxt.config.js 파일에 추가하세요.

 plugins: [ '~/plugins/axios' ]

이 작업을 수행한 후 Axios 플러그인은 사용자가 만드는 모든 요청을 가로채 특별한 경우를 정의했는지 확인합니다.

인증 모듈 소개

auth 모듈은 Nuxt 애플리케이션에 대한 인증을 수행하는 데 사용되며 $this.auth 를 사용하여 애플리케이션의 어느 곳에서나 액세스할 수 있습니다. $auth 로 컨텍스트 개체의 fetch , asyncData , middleware 및 NuxtInitServer 에서도 사용할 수 있습니다.

context 는 Nuxt에서 Vue 구성 요소까지 추가 개체/매개변수를 제공하며 위에서 언급한 것과 같은 특수한 nuxt 수명 주기 영역에서 사용할 수 있습니다.

애플리케이션에서 auth 모듈을 사용하려면 yarn 또는 npm 을 사용하여 설치해야 합니다.

실

 yarn add @nuxtjs/auth

NPM

 npm install @nuxtjs/auth

nuxt.config.js 파일에 추가합니다.

 modules: [ '@nuxtjs/auth' ], auth: { // Options }

auth 속성은 strategies 및 redirect 과 같은 속성 목록을 허용합니다. 여기에서 strategies 은 다음과 같은 선호하는 인증 방법을 허용합니다.

• local
  사용자 이름/이메일 및 암호 기반 흐름의 경우.
• facebook
  인증 수단으로 Facebook 계정을 사용합니다.
• Github
  Github 계정으로 사용자를 인증합니다.
• Google
  Google 계정으로 사용자를 인증합니다.
• 인증0
• 라라벨 여권

리디렉션 속성 은 다음에 대한 링크 개체를 허용합니다.

• login
  로그인이 필요한 경우 사용자가 이 링크로 리디렉션됩니다.
• logout
  로그아웃 후 현재 경로가 보호되는 경우 사용자는 여기로 리디렉션됩니다.
• home
  사용자는 로그인 후 여기로 리디렉션됩니다.

이제 nuxt.config.js 파일에 다음을 추가해 보겠습니다.

 /* ** Auth module configuration */ auth: { redirect: { login: '/login', logout: '/', home: '/my-reports' }, strategies: { local: { endpoints: { login: { url: "/user/login", method: "post", propertyName: "data.token", }, logout: false, user: false, }, tokenType: '', tokenName: 'x-auth', autoFetchUser: false }, }, }

auth 방법은 위의 옵션에 제공된 user 끝점이 있을 때 가장 잘 작동합니다.

auth config 객체 내부에는 로그인 경로를 /login 으로 설정하고, 로그아웃 경로를 / 로, 홈 경로를 /my-reports 로 설정하는 redirect 옵션이 있습니다. 이 옵션은 모두 예상대로 작동합니다. 또한 Axios 요청의 헤더에 Authorization 유형을 나타내는 tokenType 속성이 있습니다. 기본적으로 Bearer 로 설정되며 API와 함께 작동하도록 변경할 수 있습니다.

API의 경우 토큰 유형이 없으며 이것이 빈 문자열로 남겨두는 이유입니다. tokenName 은 Axios 요청의 헤더 내부에 있는 인증 이름(또는 토큰을 첨부하려는 헤더 속성)을 나타냅니다.

기본적으로 Authorization 으로 설정되어 있지만 API의 경우 Authorization 이름은 x-auth 입니다. autoFetchUser 속성은 로그인 후 user 끝점 속성을 사용하여 사용자 가져오기 개체를 활성화하는 데 사용됩니다. 기본적으로 true 이지만 API에는 user 엔드포인트가 없으므로 false 로 설정했습니다.

이 자습서에서는 로컬 전략을 사용합니다. 우리의 전략에는 로그인, 사용자 및 로그아웃에 대한 엔드포인트가 있는 로컬 옵션이 있지만 우리의 경우 데모 API에 *logout* 엔드포인트가 없고 사용자 개체가 반환되기 때문에 *login* 옵션만 사용합니다. *login* 이 성공했을 때.

참고: auth 모듈에는 엔드포인트 등록 옵션이 없으므로 전통적인 방식으로 등록하고 this.$auth.loginWith 를 사용하여 인증을 수행할 로그인 페이지로 사용자를 리디렉션합니다. 이것은 사용자를 인증하는 데 사용되는 방법입니다. 첫 번째 인수로 '전략'(예: local )을 수락한 다음 이 인증을 수행할 객체를 수락합니다. 다음 예를 살펴보십시오.

 let data { email: '[email protected]', password: '123456' } this.$auth.loginWith('local', { data })

인증 모듈 사용

이제 인증 모듈을 구성했으므로 등록 페이지로 이동할 수 있습니다. /register 페이지를 방문하면 등록 양식이 표시되어야 합니다.

다음 코드를 추가하여 이 양식을 기능적으로 만들 수 있습니다.

 methods: { async registerUser() { this.loading = true; let data = this.register; try { await this.$axios.post("/user/create", data); this.$router.push("/login"); this.loading = false; this.$notify({ group: "success", title: "Success!", text: "Account created successfully" }); } catch (error) { this.loading = false; this.$notify({ group: "error", title: "Error!", text: error.response ? error.response.data.error : "Sorry an error occured, check your internet" }); } } }

여기에서는 템플릿의 클릭 이벤트에 연결되고 Axios 요청을 try/catch 블록 으로 래핑하여 엔드포인트 /user/create 에 보내는 registerUser 라는 비동기 함수가 있습니다. 이렇게 하면 /login 페이지로 리디렉션되고 사용자에게 성공적으로 등록되었음을 알립니다. 또한 요청이 성공하지 못한 경우 사용자에게 오류를 경고하는 catch 블록이 있습니다.

등록에 성공하면 로그인 페이지로 리디렉션됩니다.

여기에서 인증 인증 방법 this.$auth.loginWith('local', loginData) 를 사용할 것입니다. 그런 다음 this.$auth.setUser(userObj) 를 사용하여 auth 인스턴스에서 사용자를 설정합니다.

로그인 페이지가 작동하도록 하려면 login.vue 파일에 다음 코드를 추가해 보겠습니다.

 methods: { async logIn() { let data = this.login; this.loading = true; try { let res = await this.$auth.loginWith("local", { data }); this.loading = false; let user = res.data.data.user; this.$auth.setUser(user); this.$notify({ group: "success", title: "Success!", text: "Welcome!" }); } catch (error) { this.loading = false; this.$notify({ group: "error", title: "Error!", text: error.response ? error.response.data.error : "Sorry an error occured, check your internet" }); } } }

인증 메소드 this.$auth.loginWith('local, loginData) 를 사용하여 logIn 이라는 비동기 함수를 만들었습니다. 이 로그인 시도가 성공하면 this.$auth.setUser(userInfo) 를 사용하여 인증 인스턴스에 사용자 데이터를 할당하고 사용자를 /my-report 페이지로 리디렉션합니다.

이제 this.$auth.user this.$store.state.auth.user 사용하여 사용자 데이터를 가져올 수 있지만 그게 전부는 아닙니다. auth 인스턴스에는 Vue 개발 도구를 사용하여 로그인하거나 상태를 확인할 때 볼 수 있는 몇 가지 다른 속성이 포함되어 있습니다.

this.$store.state.auth 를 콘솔에 기록하면 다음과 같이 표시됩니다.

 { "auth": { "user": { "id": "d7a5efdf-0c29-48aa-9255-be818301d602", "email": "[email protected]", "lastName": "Xo", "firstName": "Tm", "othernames": null, "isAdmin": false, "phoneNumber": null, "username": null }, "loggedIn": true, "strategy": "local", "busy": false } }

auth 인스턴스에는 애플리케이션의 nav/header 섹션에서 인증된 링크 사이를 전환하는 데 유용한 loggedIn 속성이 포함되어 있습니다. 또한 인스턴스가 실행 중인 전략 유형(예: 로컬)을 나타내는 전략 메소드도 포함합니다.

이제 이 loggedIn 속성을 사용하여 nav 링크를 정렬합니다. navBar 구성 요소를 다음으로 업데이트합니다.

 <template> <header class="header"> <div class="logo"> <nuxt-link to="/"> <Logo /> </nuxt-link> </div> <nav class="nav"> <div class="nav__user" v-if="auth.loggedIn"> <p>{{ auth.user.email }}</p> <button class="nav__link nav__link--long"> <nuxt-link to="/report-incident">Report incident</nuxt-link> </button> <button class="nav__link nav__link--long"> <nuxt-link to="/my-reports">My Reports</nuxt-link> </button> <button class="nav__link" @click.prevent="logOut">Log out</button> </div> <button class="nav__link" v-if="!auth.loggedIn"> <nuxt-link to="/login">Login</nuxt-link> </button> <button class="nav__link" v-if="!auth.loggedIn"> <nuxt-link to="/register">Register</nuxt-link> </button> </nav> </header> </template> <script> import { mapState } from "vuex"; import Logo from "@/components/Logo"; export default { name: "nav-bar", data() { return {}; }, computed: { ...mapState(["auth"]) }, methods: { logOut() { this.$store.dispatch("logOut"); this.$router.push("/login"); } }, components: { Logo } }; </script> <style></style>

템플릿 섹션에는 인증 상태에 따라 적절한 링크를 표시하기 위해 현재 auth.loggedIn 을 사용하고 있는 애플리케이션의 다른 부분에 대한 여러 링크가 있습니다. logOut() 함수가 첨부된 click 이벤트가 있는 로그아웃 버튼이 있습니다. 또한 상태 인증을 탐색 구성 요소의 계산된 속성에 매핑하는 mapState 메서드를 사용하여 Vuex 저장소에서 액세스하는 인증 속성에서 가져온 사용자의 이메일을 표시합니다. 또한 Vuex 작업 logOut 을 호출하고 사용자를 login 페이지로 리디렉션하는 logout 메서드가 있습니다.

이제 logOut 작업을 수행하도록 스토어를 업데이트하겠습니다.

 export const actions = { // .... logOut() { this.$auth.logout(); } }

logOut 작업은 사용자 데이터를 지우고, localStorage 에서 토큰을 삭제하고, loggedIn 을 false 로 설정하는 auth logout 메서드를 호출합니다.

/my-reports 및 report-incident 와 같은 경로는 게스트에게 표시되지 않아야 하지만 현재 앱에서는 그렇지 않습니다. Nuxt에는 경로를 보호할 수 있는 탐색 가드가 없지만 인증 미들웨어는 있습니다. 자신만의 미들웨어를 자유롭게 생성할 수 있으므로 원하는 방식으로 작동하도록 구성할 수 있습니다.

두 가지 방법으로 설정할 수 있습니다.

1. 경로당.
2. nuxt.config.js 파일의 전체 앱에 대해 전역적으로.

 router: { middleware: ['auth'] }

이 auth 미들웨어는 auth 인스턴스와 함께 작동하므로 미들웨어 폴더에 auth.js 파일을 생성할 필요가 없습니다.

이제 이 미들웨어를 my-reports.vue 및 report-incident.vue 파일에 추가하겠습니다. 각 파일의 스크립트 섹션에 다음 코드 줄을 추가합니다.

 middleware: 'auth'

이제 애플리케이션은 이러한 경로에 액세스하려는 사용자가 true 의 auth.loggedIn 값을 가지고 있는지 확인합니다. 인증 구성 파일의 리디렉션 옵션을 사용하여 로그인 페이지로 리디렉션합니다. 로그인하지 않은 상태에서 /my-report 또는 report-incident 를 방문하려고 하면 /login 으로 리디렉션됩니다.

/report-incidents 로 이동하면 이것이 표시되어야 합니다.

이 페이지는 인시던트를 추가하기 위한 것이지만 사용자가 양식을 제출하려고 할 때 서버를 호출하지 않기 때문에 지금은 양식에서 인시던트 를 서버로 보내지 않습니다. 이를 해결하기 위해 사용자가 Report 를 클릭할 때 호출되는 reportIncident 메소드를 추가합니다. 구성 요소의 스크립트 섹션에 있습니다. 이 메서드는 양식 데이터를 서버로 보냅니다. 다음으로 report-incident.vue 파일을 업데이트하십시오.

 <template> <section class="report"> <h1 class="report__heading">Report an Incident</h1> <form class="report__form"> <div class="input__container"> <label for="title" class="input__label">Title</label> <input type="text" name="title" v-model="incident.title" class="input__field" required /> </div> <div class="input__container"> <label for="location" class="input__label">Location</label> <input type="text" name="location" v-model="incident.location" required class="input__field" /> </div> <div class="input__container"> <label for="comment" class="input__label">Comment</label> <textarea name="comment" v-model="incident.comment" class="input__area" cols="30" rows="10" required ></textarea> </div> <input type="submit" value="Report" class="input__button" @click.prevent="reportIncident" /> <p class="loading__indicator" v-if="loading">Please wait....</p> </form> </section> </template> <script> export default { name: "report-incident", middleware: "auth", data() { return { loading: false, incident: { type: "red-flag", title: "", location: "", comment: "" } }; }, methods: { async reportIncident() { let data = this.incident; let formData = new FormData(); formData.append("title", data.title); formData.append("type", data.type); formData.append("location", data.location); formData.append("comment", data.comment); this.loading = true; try { let res = await this.$store.dispatch("reportIncident", formData); this.$notify({ group: "success", title: "Success", text: "Incident reported successfully!" }); this.loading = false; this.$router.push("/my-reports"); } catch (error) { this.loading = false; this.$notify({ group: "error", title: "Error!", text: error.response ? error.response.data.error : "Sorry an error occured, check your internet" }); } } } }; </script> <style> </style>

여기에 v-model 을 사용하는 양방향 데이터 바인딩이 포함된 제목, 위치 및 주석에 대한 입력 필드가 있는 양식이 있습니다. 클릭 이벤트가 있는 submit 버튼도 있습니다. 스크립트 섹션에는 양식에 제공된 모든 정보를 수집하고 API가 이미지와 비디오도 허용하도록 설계되었기 때문에 FormData를 사용하여 서버로 전송되는 reportIncident 메소드가 있습니다.

이 formData 는 디스패치 방법을 사용하여 Vuex 작업에 첨부됩니다. 요청이 성공하면 이 요청이 성공했음을 알리는 알림과 함께 /my-reports 로 리디렉션됩니다. 그렇지 않으면 오류 메시지와 함께 오류 알림이 표시됩니다. .

현재 스토어에는 아직 reportIncident 작업이 없으므로 브라우저 콘솔에서 이 페이지에서 제출을 클릭하려고 하면 오류가 표시됩니다.

이 문제를 해결하려면 index.js 파일에 reportIncident 작업을 추가하세요.

 export const actions = { // ... async reportIncident({}, data) { let res = await this.$axios.post('/incident/create', data) return res; } }

여기에는 빈 컨텍스트 개체와 양식에서 보내는 데이터를 받는 reportIncident 함수가 있습니다. 그런 다음 이 데이터는 사건을 생성하고 report-incident.vue 파일로 다시 반환되는 post 요청에 첨부됩니다.

이 시점에서 양식을 사용하여 보고서를 추가할 수 있어야 하며 이후에 /my-reports 페이지로 리디렉션됩니다.

이 페이지는 사용자가 생성한 사건 목록을 표시해야 하지만 지금은 위에서 본 것만 보여줍니다. 수정을 진행해 보겠습니다.

우리는 이 목록을 얻기 위해 배운 fetch 방법을 사용할 것입니다. 다음으로 my-reports.vue 파일을 업데이트하십시오.

 <script> import incidentCard from "@/components/incidentCard.vue"; export default { middleware: "auth", name: "my-reports", data() { return { incidents: [] }; }, components: { incidentCard }, async fetch() { let { data } = await this.$axios.get("/user/incidents"); this.incidents = data.data; } }; </script>

여기에서는 fetch 메서드를 사용하여 사용자별 인시던트를 가져오고 인시던트 배열에 응답을 할당합니다.

인시던트를 추가한 후 페이지를 새로 고치면 다음과 같이 표시되어야 합니다.

이 시점에서 fetch 메서드와 asyncData 가 데이터를 로드하는 방식에 차이가 있음을 알 수 있습니다.

결론

지금까지 Axios 모듈과 모든 기능에 대해 배웠습니다. 우리는 또한 asyncData에 대해 더 많이 배웠고 차이점에도 불구하고 이 둘을 함께 가져올 수 있는 방법을 배웠습니다. 또한 인증 모듈을 사용하여 애플리케이션에서 인증을 수행하는 방법과 인증 미들웨어를 사용하여 경로를 보호하는 방법도 배웠습니다. 여기에서 다룬 모든 내용에 대해 더 자세히 설명하는 몇 가지 유용한 리소스가 있습니다.

• Nuxjs에서 메타 태그 시작하기.
• Nuxt에서 dotenv 모듈 사용
• Nuxt 앱에서 Fetch를 사용합니다.
• asyncData 시작하기.

자원

1. "인증 모듈", NuxtJS.org
2. "Axios 모듈: 소개", NuxtJS.org
3. FormData , MDN 웹 문서
4. "API: asyncData 메서드", NuxtJS.org
5. "Vue 인스턴스: 수명 주기 다이어그램", VueJS.org
6. "Nuxt 2.12에서 fetch 가 작동하는 방식 이해", NuxtJS.org