与前端联调注册/登录接口(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)
image
可以看到默认采用的fakeAccountLogin方法(这里被我注释掉了)，我们找到他:
改造登录接口(pityWeb\src\services\login.js)
image
代码很简单，由于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方法做了什么:
image
- 先设置用户的权限，这里我把ROLE已经带入进来
- 设置当前状态: ok代表登录成功 error代表未成功，由于咱们用的不是status状态判断用户是否登录成功，所以需要修改为三元表达式:
payload.code === 0 ? 'ok': 'error'
上述具体返回信息可以从下图中看到
image
这里代码我们进行相应调整:
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（或者右键打开开发者工具）可以看到:
image
没错，我们遇到了跨域问题。
跨域问题具体可以去百度一下，这里简单介绍一下，是说浏览器出于安全考虑，对于前后端域名不一致的情况下，会默认进行拦截，阻止你们进行交互。这多见于前后端分离的项目中出现。
可以从前端也可以从后端的角度来处理，我们为了方便，直接改造我们的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)
贴心的我还是贴出了源代码。
再次尝试
重启下后端服务哦记得
输入错误的用户名密码，可以看到登录按钮转了一圈又回到了原点。但是登录接口又是正常响应的:
image
image
仔细查看登录块的代码，原来是没有输出错误信息。我们继续进行改造:
image
加个else即可
message.error可以弹出错误信息: 用户名或密码错误
image
目的达到了，接下来我们来试试正确的用户名和密码:
可以看到提示成功后又报错了
我们去找到api/currentUser接口的调用地方:
image
可以看到是这个方法在作祟，因为antd pro会mock一个用户，它有姓名等信息，但这些我们需要真实的，所以需要给他进行一次改造:
改造获取当前用户信息
还记得我们的登录接口返回的数据吗？我们每次登录后，把它写入浏览器缓存中，这样当用户登录以后，我们从浏览器缓存取出用户信息即可。
- 先将用户信息和token设置到缓存
image
localStorage可以操作浏览器缓存，但是只接受string和string的键值对，所以我们需要把user对象序列化为string。
- 从缓存中取出数据
image
记得数据需要反序列化
- 修改登录判断条件，这个坑找了我很久，因为咱们的字段是id不是userId，所以我刚才卡在一直登录了自动被退出:
image
保存后再次尝试
一次点亮
好了，今天的内容就到这了。前端代码已上传~
