與前端聯調注冊/登入接口(part 2)
回顧
上篇我們說啥來着，噢對說要跟「前端聯調」來着。這期呢，咱們就開始着手寫這塊内容。
這裡如果前端不太擅長的呢，代碼你就别仔細看了，因為你肯定也不太了解(雖然我還是會講講)。
你隻需要搬個小闆凳，看看具體解決了哪些問題就行，不需要想着怎麼去寫前端代碼，直接copy一下就完事了！（好家夥，我直呼好家夥！）
前端IDE配置
這裡我推薦「Webstorm」，至于vscode本人确實不太感冒，雖然會輕量級一點。(我就是喜歡jetbrains全家桶)
如果沒有的話，可以用Pycharm下載下傳Webstorm插件進行開發。
建立配置檔案
首先我們第一步先建立配置檔案:
pityWeb\src\consts\config.js
export const CONFIG = {
URL: 'http://localhost:7777',
ROLE: {
0: 'user',
1: 'admin',
2: 'superAdmin'
}
}
存儲我們的後端位址和使用者角色資訊。
檢視Antd pro的登入model(pityWeb\src\models\login.js)
可以看到預設采用的fakeAccountLogin方法(這裡被我注釋掉了)，我們找到他:
改造登入接口(pityWeb\src\services\login.js)
代碼很簡單，由于antd pro給我們封裝好了「基本的Request方法」，是以我們可以直接按部就班，依葫蘆畫瓢寫出請求
auth/login
的程式，完整代碼:
import { CONFIG } from '@/consts/config';
export async function login(params) {
return request(`${CONFIG.URL}/auth/login`, {
method: 'POST',
data: params
})
}
修改使用者的登入狀态
仔細看model中的login方法，它做了2步:
- 登入（mock）
- 将登入成功/失敗的資訊傳入changeLoginStatus方法
我們看看
changeLoginStatus
方法做了什麼:
- 先設定使用者的權限，這裡我把ROLE已經帶入進來
- 設定目前狀态: ok代表登入成功 error代表未成功，由于咱們用的不是status狀态判斷使用者是否登入成功，是以需要修改為三元表達式:
payload.code === 0 ? 'ok': 'error'
上述具體傳回資訊可以從下圖中看到
這裡代碼我們進行相應調整:
changeLoginStatus(state, { payload }) {
// setAuthority(payload.currentAuthority);
setAuthority(CONFIG.ROLE[payload.user.role]);
return { ...state, status: payload.code === 0 ? 'ok': 'error', type: payload.type };
},
注意這裡也從mock替換成了真實接口
嘗試一下
提示網絡錯誤
别慌，我們F12（或者右鍵打開開發者工具）可以看到:
沒錯，我們遇到了「跨域問題」。
跨域問題具體可以去百度一下，這裡簡單介紹一下，是說浏覽器出于安全考慮，對于前後端域名不一緻的情況下，會預設進行攔截，阻止你們進行互動。這多見于「前後端分離的項目」中出現。
可以從前端也可以從後端的角度來處理，我們為了友善，直接改造我們的
Flask
。
使Flask支援跨域
我們需要先安裝一個包:
pip3 install flask-cors
然後進行如下改造:
pity/app/__init__.py
注意這個是後端的項目哈，不要搞錯了，前後端分離就是前端也搞後端也搞，需要切換。
from flask import Flask
from flask_cors import CORS
from config import Config
pity = Flask(__name__)
CORS(pity, supports_credentials=True)
pity.config.from_object(Config)
貼心的我還是貼出了源代碼。
再次嘗試
重新開機下後端服務哦記得
輸入錯誤的使用者名密碼，可以看到登入按鈕轉了一圈又回到了原點。但是登入接口又是正常響應的:
仔細檢視登入塊的代碼，原來是「沒有輸出錯誤資訊」。我們繼續進行改造:
加個else即可
message.error可以彈出錯誤資訊:
使用者名或密碼錯誤
目的達到了，接下來我們來試試正确的使用者名和密碼:
可以看到提示成功後又報錯了
我們去找到api/currentUser接口的調用地方:
可以看到是這個方法在作祟，因為antd pro會mock一個使用者，它有姓名等資訊，但這些我們需要真實的，是以需要給他進行一次改造:
改造擷取目前使用者資訊
還記得我們的登入接口傳回的資料嗎？我們每次登入後，把它寫入浏覽器緩存中，這樣當使用者登入以後，我們從浏覽器緩存取出使用者資訊即可。
- 先将使用者資訊和token設定到緩存
localStorage可以操作浏覽器緩存，但是隻接受string和string的鍵值對，是以我們需要把user對象序列化為string。
- 從緩存中取出資料
記得資料需要反序列化
- 修改登入判斷條件，這個坑找了我很久，因為咱們的字段是id不是userId，是以我剛才卡在一直登入了自動被退出:
儲存後再次嘗試
一次點亮
好了，今天的内容就到這了。前端代碼已上傳~