与前端联调注册/登录接口 (part 2)

回顾

上篇我们说啥来着，噢对说要跟前端联调来着。这期呢，咱们就开始着手写这块内容。

这里如果前端不太熟悉的话，代码就暂时别仔细看了，因为肯定也不会太理解 (虽然我还是会讲讲)。

前端 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 步:

1. 登录（mock）
2. 将登录成功/失败的信息传入 changeLoginStatus 方法

我们看看changeLoginStatus方法做了什么:

1. 先设置用户的权限，这里我把 ROLE 已经带入进来
2. 设置当前状态: 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 };
},

尝试一下

别慌，我们 F12（或者右键打开开发者工具）可以看到:

没错，我们遇到了跨域问题。

跨域问题具体可以去百度一下，这里简单介绍一下，是说浏览器出于安全考虑，对于前后端域名不一致的情况下，会默认进行拦截，阻止你们进行交互。这多见于前后端分离的项目中出现。

可以从前端也可以从后端的角度来处理，我们为了方便，直接改造我们的Flask。

使 Flask 支持跨域

我们需要先安装一个包: pip3 install flask-cors

然后进行如下改造:

注意这个是后端的项目哈，不要搞错了，前后端分离就是前端也搞后端也搞，需要切换。

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)

贴心的我还是贴出了源代码。

再次尝试

重启下后端服务哦记得

输入错误的用户名密码，可以看到登录按钮转了一圈又回到了原点。但是登录接口又是正常响应的:

仔细查看登录块的代码，原来是没有输出错误信息。我们继续进行改造:

message.error 可以弹出错误信息: 用户名或密码错误

目的达到了，接下来我们来试试正确的用户名和密码:

我们去找到 api/currentUser 接口的调用地方:

可以看到是这个方法在作祟，因为 antd pro 会 mock 一个用户，它有姓名等信息，但这些我们需要真实的，所以需要给他进行一次改造:

改造获取当前用户信息

还记得我们的登录接口返回的数据吗？我们每次登录后，把它写入浏览器缓存中，这样当用户登录以后，我们从浏览器缓存取出用户信息即可。

1. 先将用户信息和 token 设置到缓存

localStorage 可以操作浏览器缓存，但是只接受 string 和 string 的键值对，所以我们需要把 user 对象序列化为 string。

1. 从缓存中取出数据

记得数据需要反序列化

1. 修改登录判断条件，这个坑找了我很久，因为咱们的字段是 id 不是 userId，所以我刚才卡在一直登录了自动被退出:

保存后再次尝试

好了，今天的内容就到这了。前端代码已上传~

后端代码地址: https://github.com/wuranxu/pity

前端代码地址: https://github.com/wuranxu/pityWeb

觉得有用的话可以帮忙点个 Star 哦 QAQ