Nuxt(Vue) 로 admin page 만들기 (2)

이번엔 로그인페이지를 갖다붙여보려한당!

 

 

1. page/login.vue 로그인컴포넌트 생성

     <h1 style="text-align: center" class="mb-10">Admin Login</h1>

     <v-form ref="form" @submit.prevent="submitLogin">

     <v-text-field

       v-model="id"

       label="ID"

       prepend-inner-icon="mdi-account"

       :rules="idValid"

       required

       ></v-text-field>

       <v-text-field

        prepend-inner-icon="mdi-lock"

        v-model="password"

        type="password"

        label="Password"

        :rules="pwValid"

        required

        >

        </v-text-field>

        <v-btn

        @click="submitLogin"

        color="blue lighten-1 text-capitalize"

        depressed

        large

        block

        dark

        class="mb-3"

        >

        Login

        </v-btn>

        <v-btn

        @click="addUserShow"

        color="blue lighten-1 text-capitalize"

        depressed

        large

        block

        dark

        >

        Sign Up

        </v-btn>

        </v-form>

 

 

 

2. 기존에 layouts/default.vue 의 컴포넌트가 레이아웃으로 적용되면 안되기에 로그인용 레이아웃을 또 따로 만들어주었다.

<template>

      <nuxt />

</template>

 

<script lang="ts">

import { Component, Vue } from 'nuxt-property-decorator';

 

@Component({

    name: 'fullPage'

})

export default class fullPage extends Vue {}

</script>

 

 

3. login.vue 에 레이아웃 변경.

export default {

      name: 'Login',

      layout : 'fullPage',

      .....

}

 

 

 

4. http://localhost:3000/login 접속

 

이제 [ Login ] 버튼을 눌렀을시, 실제로 login API를 통해 메인페이지로 넘어가보도록 처리해보자.

 

---

Axios 설치하기

• Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 아다.
• 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.
• 이미 자바스크립트에는 fetch api가 있지만, Vue 프레임워크에서 ajax를 구현할땐 axios를 쓰는 편이라고 보면 된다.(Vue2 버전대 기준)

1. @nuxt/axios 설치

yarn add @nuxt/axios

보통 Vue 프로젝트를 하다보면 axios 와 @nuxt/axios 가 보일때가 있는데, 나는 이 2개가 같은건 줄 알고 
삽질을 엄청했더랬다 ㅜㅜ
근데 엄연히 이 2개는 다른 Lib 이다!!

 

@nuxt/axios와 axios는 둘 다 HTTP 클라이언트 라이브러리로서, 웹 애플리케이션에서 서버와 통신하는 데 사용된다.

하지만 사용 목적과 특징에서 차이가 있다.

 

@nuxt/axios는 Nuxt.js 프레임워크를 위해 특별히 개발된 모듈로, Nuxt.js 애플리케이션에서 HTTP 클라이언트를 사용할 수 있도록 도와준다.

• Nuxt.js 애플리케이션에서 사용 가능한 모듈
• 미리 설정된 기본 옵션으로 쉬운 사용성 제공
• Nuxt.js의 서버 사이드 렌더링과 함께 잘 동작

한 마디로 말해 axios는 일반적인 웹 애플리케이션 개발을 위해 사용되는 HTTP 클라이언트 라이브러리이고, @nuxt/axios는 Nuxt.js 프레임워크에서 특별히 사용되는 Nuxt.js 모듈이라 생각하면된다.

 

2. @nuxt/proxy 설치

yarn add @nuxt/proxy

같은 로컬 호스트에 API 서버 포트는 8080 이고 Nuxt 포트는 3000 이므로 CORS 우회를 위해 프록시도 추가로 설치했다.

(Cross Origin Resource Sharing의 약자로, 현재 웹페이지 도메인에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 말한다. )

 

 

 

3. nuxt.config.js 에 모듈과 프록시설정 추가

modules: [

   '@nuxtjs/axios',

],

axios: {

    proxy: true

},

proxy: {

     '/api': {

           target: 'http://localhost:8080',

           changeOrigin: true

     }

},

 

'/api' 경로로 시작하는 url 은 target에 적은 url 로 호출된다.

 

4. $axios plugin 정의 (plugins/api.js)

axios 를 쓸 때 기본적인 요청/응답/에러처리를 공통으로 처리 하기 위해 따로 플러그인으로 통신 모듈을 만들었다.

 

export default function({ $axios, store, error: nuxtError, redirect }, inject) {

            const hostUrl = `${process.env.API_HOST_URL}`

 

            const api = $axios.create({

                  ....

            });

            

            api.onRequest((config) => {

                  return config;

            });

            

            api.onResponse((response) => {

                  ......

            });

 

            api.onError((error) => {

                  return Promise.resolve(false);

            });

            // context에 주입, $api 형태로 호출 가능

            inject("api", api);

}

 

nuxt.config.js 에 plugin 추가

plugins: [

      '~/plugins/api.js',

]

 

 

5. 로그인시 http Request 수행

async submitLogin() {

         if (this.$refs.form.validate()){

               const param = {

                        loginId: this.id,

                        password: this.password

                };

         this.$api.$post('/api/auth/login', JSON.stringify(param),{

         }).then(res => {

                  if(!res.result){

                           // 에러 toast 팝업

                           this.showErrorAlert(res.message);

                  }else {

                           // 인증정보저장

                           this.saveAuthInfo(res.data.accessToken);

                  }

         }).catch((err) => {

                          this.showErrorAlert(err.message);

         })

 

     }

},

 

로그인 URL : http://localhost:8080/api/user/login

Response

 

응답시 토큰값 잘 받아오는거 확인!

여러 path 에서 토큰값을 공유하기 위해 store에 저장시킨다.

 

6. 토큰 저장 모듈 생성(store/index.js)

mutations: {

      SET_TOKEN(state, data) {

      state.token = data;

      Cookie.set('token', data, { expires: 1 });

},

....

....

nuxtServerInit({ commit }, { req }) {

    ....

    commit('SET_TOKEN', accessToken);

},

store 와 cookie 에 토큰값을 저장한다.

store 경우 새로고침시 값이 사라지므로 nuxt새로고침시 cookie 에 있는 토큰값을 다시 store 에 세팅해주었다.

( 왜 쿠키에 저장시켰냐믄, 요건 SSR 이기 때문에 localstorage 나 sessionstorage 사용을 하지 못한다. <- 온갖 삽질해봤는데 안됨ㅠ 아시는분은 댓글좀.. )

 

 

7. 인증체크(middleware/auth.ts)

다른 페이지 URL 접속시 로그인이 되어있지 않을 경우 로그인 페이지로 redirect 시키기 위해

router 를 추가하였다.

const whiteList = [

       '/login','/register'

];

if (!whiteList.includes(route.path)) {

       if (!token) return redirect('/login');

} else if (token) return redirect('/');

store  토큰값 체크 여부를 통해

로그인과 등록페이지는 따로 제외시키고,  나머지 path 는 /login 이 필요하도록 redirect 처리하였다.

 

nuxt.config.js 에 설정 추가

router: {

        middleware: 'auth'

}

 

 

 

 

 

 

 

 

 

참고 : 

https://axios.nuxtjs.org/helpers/

https://joshua1988.github.io/vue-camp/nuxt/nuxt-axios.html