【vue2.7.16系列】手把手教你搭建后台系统__从登录流程再去看tp6架构（9）

架构问题

上一篇【【vue2.7.16系列】手把手教你搭建后台系统__登录接口调通（8）】虽然把登录接口调通了，但是还有许多需要改进的地方。比如view/admin每次调接口都要打包（跨域问题，对本地开发不友好），账号密码校验，密码hash，返回管理员信息token，dao层设置的model每次去处理数据都要去实例化等等，我们一个一个去优化下。

解决跨域问题

只需要在view/admin目录下vue.config.js中配置代理来实现接口的转发。

devServer: {
   
   
  open: true,
  proxy: 'http://xkadmin.com'
}

// 注意，在src/utils/request.js中修改基础路径
const instance = axios.create({
   
   
  // 设置默认的基础URL
  baseURL: '/adminapi',
  timeout: 5000,
});

账号密码校验

这里需要打开验证器官方手册。然后在adminapi应用目录下添加validate/system/SystemAdminValidate.php文件，内容如下：

<?php

namespace app\adminapi\validate\system;

use think\Validate;

class SystemAdminValidate extends Validate
{
   
   
    /**
     * 定义验证规则
     * 格式：'字段名'    =>    ['规则1','规则2'...]
     * @var array
     */
    protected $rule = [
        'account' => ['require', 'alphaDash'],
        'conf_pwd' => 'require',
        'pwd' => 'require',
        'real_name' => 'require',
        'roles' => ['require', 'array'],
    ];

    /**
     * 定义错误信息
     * 格式：'字段名.规则名'    =>    '错误信息'
     * @var array
     */
    protected $message = [
        'account.require' => '请填写管理员账号',
        'account.alphaDash' => '管理员账号只能是字母、数字和下划线_及破折号-',
        'conf_pwd.require' => '请输入确认密码',
        'pwd.require' => '请输入密码',
        'real_name.require' => '请输管理员姓名',
        'roles.require' => '请选择管理员身份',
        'roles.array' => '身份必须为数组',
    ];

    protected $scene = [
        'get' => ['account', 'pwd'],
        'update' => ['account', 'roles'],
    ];
}
?>

然后在控制器Login.php的login方法中验证参数

public function login()
  {
   
   
    $account = $this->request->post('username');
    $password = $this->request->post('password');
    // 验证参数
    validate(\app\adminapi\validate\system\SystemAdminValidate::class)->scene('get')->check([
      'account' => $account,
      'pwd' => $password
    ]);

    return json($this->services->login($account, $password, 'admin'));
  }

添加这之后，username输入admin@后，点击登录后，如下图所示：


如果没有任何响应，可以设置项目跟目录下的.env文件中的app_debug字段为false。
或者可以使用异常处理接管，直接接管验证不通过抛出的错误信息，然后json响应，在app目录下的ExceptionHandle.php文件中的render方法中添加自定义异常处理机制：

/**
     * Render an exception into an HTTP response.
     *
     * @access public
     * @param \think\Request   $request
     * @param Throwable $e
     * @return Response
     */
    public function render($request, Throwable $e): Response
    {
   
   
        // 添加自定义异常处理机制
        if ($e instanceof ValidateException) {
   
   
            return json(['code' => $e->getCode(), 'message' => $e->getMessage()]);
        }

        // 其他错误交给系统处理
        return parent::render($request, $e);
    }

密码hash

一般我们数据库中是不允许存储明文密码的，因此我们需要做加密处理。我们使用PHP系统函数password_hash进行密码处理。先更改数据库中存储的明文密码。
在SystemAdminServices中

// 这里如果不对用户输入的密码做hash处理，再与数据库中存储的密码进行比对，会抛出错误。
if ($password !== $adminInfo->pwd) {
   
   
  throw new AdminException('账号或密码错误，请重新输入');
}

// 修改后
if (!password_verify($password, $adminInfo->pwd)) {
   
   
   throw new AdminException('账号或密码错误，请重新输入');
}

还有一点需要注意的，就是自定义异常处理机制需要调整，已确保前端接收到的错误是json数据，可以很好处理。

/**
     * Render an exception into an HTTP response.
     *
     * @access public
     * @param \think\Request   $request
     * @param Throwable $e
     * @return Response
     */
    public function render($request, Throwable $e): Response
    {
   
   
        // 添加自定义异常处理机制
        if ($e instanceof ValidateException) {
   
   
            return json(['code' => $e->getCode(), 'msg' => $e->getMessage()]);
        }
        if ($e instanceof AdminException) {
   
   
            return json(['code' => $e->getCode(), 'msg' => $e->getMessage()]);
        }
        // 其他错误交给系统处理
        return parent::render($request, $e);
    }

返回管理员信息token

在app/services/system/admin/SystemAdminServices.php中调整login方法

public function login(string $account, string $password, string $type)
  {
   
   
    $adminInfo = $this->dao->accountByAdmin($account);
    $tokenInfo = $this->createToken($adminInfo->id, $ty