Vue에서 백그라운드 관리를 위한 별도의 로그인 기능을 추가하는 방법

<template>
  <div class="login">
    <h1>管理员登陆</h1>
    <form>
      <div>
        <label>用户名：</label>
        <input type="text" v-model="username">
      </div>
      <div>
        <label>密码：</label>
        <input type="password" v-model="password">
      </div>
      <div>
        <button type="submit" @click.prevent="login">登陆</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Login',

  data () {
    return {
      username: '',
      password: ''
    }
  },

  methods: {
    login () {
      // 向后台发送登录请求
    }
  }
}
</script>

<style scoped>
.login {
  width: 300px;
  margin: 0 auto;
}
.login h1 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}
.login form div {
  margin-bottom: 10px;
  text-align: center;
}
.login form label {
  display: inline-block;
  width: 80px;
}
.login form input {
  width: 180px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}
.login form button[type=submit] {
  width: 100px;
  height: 30px;
  margin-top: 20px;
  border: none;
  background-color: #409EFF;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
</style>

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

import axios from 'axios'
import config from '../config'

export const login = (username, password) => {
  return axios.post(config.apiBaseUrl + '/login', { username, password })
    .then(response => response.data)
    .catch(error => console.log(error))
}

import { login } from '@/services/api'

const state = {
  token: null
}

const mutations = {
  setToken (state, token) {
    state.token = token
  }
}

const actions = {
  login ({ commit }, { username, password }) {
    return login(username, password)
      .then(token => {
        commit('setToken', token)
      })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './auth'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth
  }
})