[Nuxt Admin] 6. Nuxt에서 로그인 처리

in Devlog on Nuxt



[ Nuxt Admin Template 6 ] Nuxt에서 Express로 로그인 처리


12. Nuxt에서 로그인 처리

우선 로그인 페이지와 레이아웃를 만들어주자

layouts/loginLayout.vue

<template>
    <v-content>
      <nuxt />
    </v-content>
</template>


pages/v1/login/index.vue

<template>
  <v-app id="inspire">
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-12">
              <v-form @submit.prevent>
                <v-toolbar dark color="primary">
                  <v-toolbar-title>관리자 로그인</v-toolbar-title>
                  <v-spacer></v-spacer>
                </v-toolbar>
                <v-card-text>
                    <v-text-field prepend-icon="person" id="id" name="id" label="id" type="text" v-model="frmId"></v-text-field>
                    <v-text-field prepend-icon="lock" id="pw" name="pw" label="pw" type="password" v-model="frmPw"></v-text-field>
                </v-card-text>

                <p v-if="returnMsg" class="error">
                  { { returnMsg } }
                </p>

                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="primary" @click="login">
                    로그인
                  </v-btn>
                </v-card-actions>
              </v-form>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  layout: 'loginLayout',
  data () {
    return {
      returnMsg: null,
      frmId: '',
      frmPw: ''
    }
  },
  methods: {
    async login () {
      try {
        await this.$store.dispatch('login', {
          id: this.frmId,
          pw: this.frmPw
        }).then(() => this.redirect())
      } catch (e) {
        this.returnMsg = e.message
      }
    },
    redirect () {
      this.$router.push('/')
    }
  }
}
</script>


필요한 패키지들을 설치하고

$ npm install @nuxtjs/axios --save-dev
$ npm install express-session express body-parser --save-dev


express를 이용해서 로그인처리를 할 예정이기에 nuxt.config.js 파일에 추가해주고, apis/index.js 파일을 만들어준다.

nuxt.config.js (생략된 코드)

//express로 개발하기에 추가
import bodyParser from 'body-parser'
import session from 'express-session'

module.exports = {

  // 미들웨어에 접근인증을 위해 추가
  router: {
    middleware: 'auth'
  },
  // axios 모듈 추가
  modules: [
    '@nuxtjs/axios'
  ],

  /*
  ** Add server middleware
  ** Nuxt.js uses `connect` module as server
  ** So most of express middleware works with nuxt.js server middleware
  */
  serverMiddleware: [
    // body-parser middleware
    bodyParser.json(),
    // session middleware
    session({
      secret: 'super-secret-key',
      resave: false,
      saveUninitialized: false,
      cookie: { maxAge: 60000 }
    }),
    // Api middleware
    // We add /api/login & /api/logout routes
    '~/apis'
  ]
}


서버 인증api 역할을 하기 위해

apis/index.js

import express from 'express'

// Create express router
const router = express.Router()

const app = express()
router.use((req, res, next) => {
  Object.setPrototypeOf(req, app.request);
  Object.setPrototypeOf(res, app.response);
  req.res = res;
  res.req = req;
  next();
});

router.post('/login', (req, res) => {
  if (req.body.id === 'admin' && req.body.pw === 'a00000') {
    req.session.authUser = req.body.id
    return res.json({ id: 'admin' });
  }
  return res.json({ id: '' });
});

router.post('/logout', (req, res) => {
  delete req.session.authUser;
  res.json({ ok: true });
});

// Export the server middleware
export default {
  path: '/apis',
  handler: router
};


store/index.js

import axios from 'axios'

export const state = () => ({
  sidebar: false,
  authUser: null
})

export const mutations = {
  toggleSidebar: function (state) {
    state.sidebar = !state.sidebar
  },
  LOGIN: function (state, user) {
    state.authUser = user
  },
  LOGOUT: function () {
    state.authUser = null
  },
  SET_USER: function (state, user) {
    state.authUser = user
  },
  SET_MENU: function (state, data) {
    state.topMenu = data.topMenu
    state.aside = data.aside
  }
}

export const actions = {
  // nuxtServerInit는 모든 페이지를 서버 렌더링하기 전에 Nuxt.js에 의해 호출
  async nuxtServerInit({ commit }, { req }) {
    if (req.session && req.session.authUser) {
      commit('SET_USER', req.session.authUser)
    }
  },
  async login({ commit }, { id, pw }) {
    let { data } = await axios.post('/apis/login', { id, pw })
    if (!data.id) {
      throw new Error('로그인에 실패했습니다.')
    }
    commit('LOGIN', data.id)
  },
  async logout({ commit }) {
    await axios.post('/apis/logout').then(() => commit('LOGOUT'))
  }
}


페이지 이동시 인증되지 않은 접근을 막기 위해 추가

middleware/auth.js

export default function ({ store, redirect, error }) {
  // auth 확인
  if (!store.state.authUser) {
    return redirect('/v1/login')
  }
}


Nuxt에서 기본적인 로그인 인증방식을 포스팅을 해봤다. 하나씩 하나씩 가볍게 살 좀 더 붙여보겠습니다.

참고