web/back + front

vue+flask 시작 로그인 구현 1.

qkqhxla1 2018. 7. 13. 11:14

로그인을 구현해보았다. 앞에서 vue와 flask의 연동을 다뤘지만 실질적인 데이터 이동은 없는 말 그대로 그냥 기본적인 vue 프론트를 flask에서 실행시키는 정도여서.. 이번엔 데이터가 왔다갔다하는 로그인 폼을 구현해보기로 했다.


혹시모르니까 파일구조 한번 캡쳐...


첫번째로 로그인을 구현할 뷰 페이지로 /src/components아래에 Login.vue를 만들었다. 로그인 페이지로 이쁘게 만들어보려다가 욕심이 너무 과하다 생각하여 그냥 기능만 되는 페이지를 만들기로 하였다. 로그인 체크는 회사의 ldap으로 할거기에 placeholder에 ldap 관련 문구를 넣었다. 

폼은 바로 이전 글의 bootstrap-vue에서 가져왔다. https://bootstrap-vue.js.org/docs/components/form


Login.vue.

<template>
  <div>
    쿠팡 Ldap id, pw를 입력하세요.
    <b-form inline>
      <label class="sr-only" for="inlineFormInputName2">Name</label>
      <b-input class="mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="ldap id" />
      <b-input class="mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="ldap pw" />
      <b-button variant="primary" v-on:click="login">Login</b-button>
    </b-form>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

<style scoped>

</style>

그리고 메인 뷰 페이지인 /src/App.vue에서 저 로그인 페이지로 보내기 위해 네비게이션에 로그인 필드를 추가했다. 네비게이션은 https://bootstrap-vue.js.org/docs/components/navbar 에서 가져왔다.


App.vue

<template>
  <div id="app">
    <b-navbar toggleable="md" type="dark" variant="info" fixed="top">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

      <b-navbar-brand v-bind:to="'/home'">메뉴</b-navbar-brand>
      <b-collapse is-nav id="nav_collapse">
        <b-navbar-nav>
          <b-nav-item v-bind:to="'/login'">로그인</b-nav-item>
          <b-nav-item href="#" disabled>Disabled</b-nav-item>
        </b-navbar-nav>
        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-nav-form>
            <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
          </b-nav-form>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
<!-- navbar-1.vue -->
    <img src="./assets/logo.png">
    <!--<router-link v-bind:to="'rara'">testsssss</router-link>-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style> 

그리고 /src/router/index.js에 등록을 해 줘야 제대로 작동한다.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import mycomponent from '@/components/MyComponent'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/rara',
      component: mycomponent
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

..이쁘지는 않지만 작동은 한다.

여기까지가 기본적인 프론트 부분이다.


url에 위 캡쳐에 보이는것처럼 #이 끼는데, 이걸 없애려면 router를 만들때 아래처럼 mode를 추가해준다.


export default new Router({

  mode: 'history',

  routes: [

....