Merge branch 'master' of https://gitlab.com/halo_dev/halo-admin

src/api/admin.js

@@ -18,4 +18,29 @@ adminApi.install = data => {
     method: 'post'
   })
 }
+
+adminApi.login = (username, password) => {
+  return service({
+    url: `${baseUrl}/login`,
+    data: {
+      username: username,
+      password: password
+    },
+    method: 'post'
+  })
+}
+
+adminApi.logout = () => {
+  return service({
+    url: `${baseUrl}/logout`,
+    method: 'post'
+  })
+}
+
+adminApi.refreshToken = refreshToken => {
+  return service({
+    url: `${baseUrl}/refresh/${refreshToken}`,
+    method: 'post'
+  })
+}
 export default adminApi

src/store/modules/user.js

@@ -1,3 +1,7 @@
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import adminApi from '@/api/admin'
+
 const user = {
   state: {
     token: '',
@@ -6,9 +10,9 @@ const user = {
     roles: [],
     info: {}
   },
-
   mutations: {
     SET_TOKEN: (state, token) => {
+      Vue.ls.set(ACCESS_TOKEN, token)
       state.token = token
     },
     SET_NAME: (state, { name }) => {
@@ -24,8 +28,23 @@ const user = {
       state.info = info
     }
   },
-
   actions: {
+    login({ commit }, { username, password }) {
+      return new Promise((resolve, reject) => {
+        adminApi
+          .login(username, password)
+          .then(response => {
+            const token = response.data.data
+            Vue.$log.debug('Got token', token)
+            commit('SET_TOKEN', token)
+
+            resolve(response)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    }
   }
 }
 

src/utils/service.js

@@ -3,6 +3,7 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import Vue from 'vue'
 import { message } from 'ant-design-vue'
+import store from '@/store'
 
 const service = axios.create({
   baseURL: process.env.NODE_ENV === 'production' ? '' : 'http://localhost:8090',
@@ -14,6 +15,11 @@ service.interceptors.request.use(
   config => {
     NProgress.start()
     // TODO set token
+    const token = store.getters.token
+    Vue.$log.debug('Got token from store', token)
+    if (token && token.access_token) {
+      config.headers['Admin-Authorization'] = token.access_token
+    }
     return config
   },
   error => {

src/views/user/Login.vue

@@ -4,12 +4,18 @@
       Halo
     </div>
     <div class="loginBody animated">
-      <a-form layout="vertical">
+      <a-form
+        layout="vertical"
+        @keyup.enter.native="handleLogin"
+      >
         <a-form-item
           class="animated fadeInUp"
           :style="{'animation-delay': '0.1s'}"
         >
-          <a-input placeholder="用户名/邮箱">
+          <a-input
+            placeholder="用户名/邮箱"
+            v-model="username"
+          >
             <a-icon
               slot="prefix"
               type="user"
@@ -22,6 +28,7 @@
           :style="{'animation-delay': '0.2s'}"
         >
           <a-input
+            v-model="password"
             type="password"
             placeholder="密码"
           >
@@ -38,7 +45,8 @@
         >
           <a-button
             type="primary"
-            block="true"
+            :block="true"
+            @click="handleLogin"
           >登录</a-button>
         </a-form-item>
       </a-form>
@@ -47,18 +55,42 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+
 export default {
-  beforeCreate() {
-    this.form = this.$form.createForm(this)
+  data() {
+    return {
+      username: null,
+      password: null
+    }
   },
   methods: {
-    handleSubmit(e) {
-      e.preventDefault()
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          console.log('Received values of form: ', values)
-        }
+    ...mapActions(['login']),
+    handleLogin() {
+      if (!this.username) {
+        this.$message.warn('用户名不能为空')
+        return
+      }
+
+      if (!this.password) {
+        this.$message.warn('密码不能为空')
+        return
+      }
+
+      this.login({ username: this.username, password: this.password }).then(response => {
+        // Go to dashboard
+        this.loginSuccess()
       })
+    },
+    loginSuccess() {
+      this.$router.push({ name: 'Dashboard' })
+      // 延迟 1 秒显示欢迎信息
+      setTimeout(() => {
+        this.$notification.success({
+          message: '欢迎',
+          description: `欢迎回来`
+        })
+      }, 1000)
     }
   }
 }