调通登录链路

console/src/main/resources/static/console-fe/src/globalLib.js

@@ -603,7 +603,19 @@ const request = (function(_global) {
         beforeSend(xhr) {
           config.beforeSend && config.beforeSend(xhr);
         },
+        headers: {
+          Authorization: localStorage.getItem('token'),
+        },
       })
+    ).then(
+      success => {},
+      error => {
+        // 处理403 forbidden
+        if (error && error.status === 403) {
+          // 跳转至login页
+          window.location = '/#/login';
+        }
+      }
     );
   }
   // 暴露方法

console/src/main/resources/static/console-fe/src/pages/Login/Login.jsx

@@ -1,14 +1,33 @@
 import React from 'react';
-import { Card, Form, Input } from '@alifd/next';
+import { Card, Form, Input, Message } from '@alifd/next';
 
 import './index.scss';
 import Header from '../../layouts/Header';
+import { request } from '../../globalLib';
 
 const FormItem = Form.Item;
 
 class Login extends React.Component {
   handleSubmit = values => {
-    console.log('Get form value:', values);
+    request({
+      type: 'get',
+      url: 'v1/auth/login',
+      data: values,
+      success: res => {
+        if (res.code === 200) {
+          const data = res.data;
+          // TODO: 封装一个方法存储、读取token
+          localStorage.setItem('token', data);
+          // TODO: 使用react router
+          window.location = '/#/';
+        }
+      },
+      error: () => {
+        Message.error({
+          content: '登录失败',
+        });
+      },
+    });
   };
 
   render() {

console/src/main/resources/static/console-fe/src/pages/Login/index.scss

@@ -102,6 +102,7 @@ $contentWidth: 1280px;
       color: #fff;
       max-width: 780px;
       margin: 12px auto 30px;
+      text-align: left;
     }
   }
 }