?概述：

在上一篇我們已經將后端初始化服務后前端的vue框架初始化已經搭建完整，并且可以運行看到界面，服務正常，當然我們看到的前端數據都是mock下的假數據，并不是真實的，這篇我們來開發實現第一個功能，登錄接口的打通開發實現（第一個簡單的登錄接口實現）

前端框架結構

├── build                      // 構建相關  
├── mock                       // 項目mock 模擬數據
├── public                     // 公共資源
├── src                        // 源代碼
│   ├── api                    // 所有接口請求
│   ├── assets                 // 主題 字體等靜態資源
│   ├── components             // 全局公用組件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 項目所有 svg icons
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局樣式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                  // view
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口 加載組件 初始化等
│   └── permission.js          // 權限管理

api ：請求服務端接口的配置都在這里，這里邏輯實現是用到了utils里邊的封裝的request.js，其中在沒有正式服務接口的之前是可以直接調用上邊mock里的地址，得到模擬的數據請求。

views：頁面的布局，樣式，功能實現的地方，一般一個vue代表一個功能頁面，具體根據自身項目邏輯劃分就可以。

獲取登錄接口

終端切換到vue-element-admin目錄，執行npm run dev 編譯并開發者模式運行，這里和依賴環境中啟動方式保持一致即可；

用chrome打開，進入登錄頁面，并依次瀏覽器菜單-更多工具-開發者工具，進入調試模式，切換到查看網絡，來查看在登錄網絡請求

輸入admin，任意密碼，點擊Login，正常進入主頁后我們會分別看到兩個登錄相關接口login 和 info，請求Request URL分別為：

http://172.16.60.60:9527/dev-api/vue-element-admin/user/login 方法post

對應返回結果如下：

{"code":20000,"data":{"token":"admin-token"}}

http://172.16.60.60:9527/dev-api/vue-element-admin/user/info?token=admin-token

get請求如下

返回結果如下：

其實這個如果在/mock/user.js也能通過代碼看到，登錄接口的內容。

實現登錄接口

既然已經知道登錄接口的請求以及重要的返回值，那么我們就可以用flask實現這兩個接口，一個是登錄驗證用戶存在返回token，另一個是登錄成功后獲取用戶信息。

[POST] /user/login

1. 編寫代碼： app.py 或者你順手的編輯器

# -*- coding: utf-8 -*-from flask import Flaskfrom flask import requestimport jsonapp = Flask(__name__)@app.route("/api/hello")def hello():return "Hello, World!"@app.route("/api/user/login",methods=['POST'])
def login():data = request.get_data() # 獲取post請求body數據js_data = json.loads(data) # 將字符串轉成json# 驗證如果是admin用戶名，即登錄成功，返回admin的token，否則驗證失敗if 'username' in js_data and js_data['username'] == 'admin':result_success = {"code":20000,"data":{"token":"admin-token"}}return result_successelse:result_error = {"code":60204,"message":"賬號密碼錯誤"}return result_errorif __name__ == "__main__":app.run(debug = True)

1. 測試：運行python app.py 通過后 curl 或者 postman進行請求測試

1）登錄成功

curl -X POST http://127.0.0.1:5000/api/user/login -d '{"username":"admin","password":"123456"}'

1. 非admin登錄錯誤

curl -X POST http://127.0.0.1:5000/api/user/login -d '{"username":"root","password":"654321"}'

[GET] /user/info

1. 繼續追加實現代碼

@app.route("/api/user/info",methods=['GET'])def info():# 獲取GET中請求token參數值token = request.args.get('token')if token == 'admin-token':result_success = {"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}return result_successelse:result_error = {"code": 60204, "message": "用戶信息獲取錯誤"}return result_error

1. 繼續測試

curl 'http://127.0.0.1:5000/api/user/info?token=admin-token'

到此后端代碼用戶登錄邏輯接口實現完了，我們可以保持后端服務運行，然后讓我們將前端的請求從mock切換成我們自己的服務，在原有代碼中補充我們寫的代碼

完整代碼如下：

# -*- coding: utf-8 -*-from flask import Flaskfrom flask import requestimport jsonapp = Flask(__name__)@app.route("/api/hello")def hello():return "Hello, World!"@app.route("/api/user/login",methods=['POST'])
def login():data = request.get_data() # 獲取post請求body數據js_data = json.loads(data) # 將字符串轉成json# 驗證如果是admin用戶名，即登錄成功，返回admin的token，否則驗證失敗if 'username' in js_data and js_data['username'] == 'admin':result_success = {"code":20000,"data":{"token":"admin-token"}}return result_successelse:result_error = {"code":60204,"message":"賬號密碼錯誤"}return result_error@app.route("/api/user/info",methods=['GET'])def info():# 獲取GET中請求token參數值token = request.args.get('token')if token == 'admin-token':result_success = {"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}return result_successelse:result_error = {"code": 60204, "message": "用戶信息獲取錯誤"}return result_errorif __name__ == "__main__":app.run(debug = True)

請求正式服務接口

1. 修改接口請求地址

路徑 vue-element-admin/src/api/user.js ，進行打開編輯, 配置成自己寫的請求的api地址( 注釋掉的就是原來mock地址)

export function login(data) {return request({// url: '/vue-element-admin/user/login',url: '/api/user/login',method: 'post',data})}export function getInfo(token) {return request({// url: '/vue-element-admin/user/info',url: '/api/user/info',method: 'get',params: { token }})
}

1. 修改一個請求域名

另外還需要修改一下默認的域名地址，文件位于根目錄.env.development 里邊一項改成，這里只暫時dev配置環境的。

VUE_APP_BASE_API = 'http://127.0.0.1:5000/'

1. 運行測試

重新啟動運行前端，嘗試登錄，查看登錄狀態和chrome調試模式的請求返回，你會發現并沒有成功，看flask日志輸出顯示類似 "OPTIONS /api/user/login HTTP/1.1" 200 提示，這是由于跨域問題，簡單說就是瀏覽器一種安全機制，至于詳細的后續單獨再說，這里先一個通用解決辦法就是在python flask中允許跨域就好了。

跨域解決

1. 安裝python依賴包flask-cors

pip install flask-cors

1. 頭部引用

 from flask_cors import CORS  

1. 允許代碼

app = Flask(__name__)
CORS(app, supports_credentials=True)

最終聯調

重新運行后端服務 python run.py

重新運行前端服務 npm run dev

輸入 admin / 123456 進行登錄

OK 前后端聯調成功

好了，到此我們一個簡單的登錄流程就實現了，當然這只是一個很簡單的登錄接口流程，目的是為了讓你掌握如何實現前端和后端接口登錄的一個實現過程，后期我們會將登錄這里進行重構使用更加保密的方式，密碼通過Md5或者哈希的方式進行加密，這種方式才是我們目前所有市面上使用的通過登錄功能，當然不著急，還是那句話，勛勛漸進，慢慢一步一步走。

?