携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天点击查看活动详情

前言

昨天整理了一下Hyperf接口对接，今天就想尝试修改一个element plus的后台框架，因为是Vue3的，改好了好久进度缓慢，没对Vue3进行了解，以为自己之前做过基于Vue2 的element 的框架，还有公司的项目参考，今天硬刚Vue3算是失败了。

因为前天找的后台管理框架用到了pinia状态管理器，管理用户Token直接蒙了，换了几个TypeScript的其他后台管理后台，使用的是Vuex状态管理，然后调试的时候看到各种报错，类型限制报错，然后修改全局拦截器，去除Mock服务，添加了框架代理弄了好久才成功，要是弄完不知道要多久，最后打算放弃。

今天来使用之前用的Vue2的element后台管理框架，之前花了一个月的时间做了一个完成的前端台项目。用到了golang做的后端接口，今天就拿过来换成PHP的框架，有兴趣可以看看之前的文章，最后一篇有所有的总结：从零开始摸索VUE，配合Golang搭建导航网站（二十八.vue-admin-template完善CI脚本，整体完成上线，汇总开源！！！）

后端接口增加跨域中间件和鉴权中间件

后端要在header头中增加Access-Control-Allow-Origin等三个键作为响应体的header头内容给前端防止跨域报错，当然也可以用Nginx，但是本地调试用Nginx就很麻烦了,位置：App\Middleware\CorsMiddleware.php

<?php

declare(strict_types=1);

namespace App\Middleware;

use Hyperf\Utils\Context;
use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use Psr\Http\Server\MiddlewareInterface;
use Psr\Http\Server\RequestHandlerInterface;

class CorsMiddleware implements MiddlewareInterface
{
    public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
    {
        $response = Context::get(ResponseInterface::class);
        $response = $response->withHeader('Access-Control-Allow-Origin', '*')
            ->withHeader('Access-Control-Allow-Credentials', 'true')
            // Headers 可以根据实际情况进行改写。
            ->withHeader('Access-Control-Allow-Headers', 'DNT,Keep-Alive,token,operator_token,User-Agent,Cache-Control,Content-Type,Authorization');

        Context::set(ResponseInterface::class, $response);

        if ($request->getMethod() == 'OPTIONS') {
            return $response;
        }

        return $handler->handle($request);
    }
}

启用这个全局中间件,在config/autoload/middlewares.php中：

<?php

declare(strict_types=1);

use App\Middleware\CorsMiddleware;

return [
    'http' => [
        CorsMiddleware::class,
    ],
];

还需要增加一个鉴权中间件，除了登录接口，其他的接口都要在加上这个中间件。在前后端交互的逻辑中，前端要保存登录接口成功后返回给前端的携带token，在之后的所有接口都需要携带这个token,一般放在hearder头中，后端也要时时刻刻检测这个token是否合法。新建一个中间件：App\Middleware\AuthMiddleware.php：

<?php

declare(strict_types=1);
/**
 * This file is part of Hyperf.
 *
 * @link     https://www.hyperf.io
 * @document https://hyperf.wiki
 * @contact  group@hyperf.io
 * @license  https://github.com/hyperf/hyperf/blob/master/LICENSE
 */
namespace App\Middleware;

use App\Constants\ErrorCode;
use App\Exception\BusinessException;
use App\Tool\Token;
use Hyperf\Utils\Context;
use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use Psr\Http\Server\MiddlewareInterface;
use Psr\Http\Server\RequestHandlerInterface;

class AuthMiddleware implements MiddlewareInterface
{
    public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
    {
        $token = new Token();
        if (! $request->hasHeader('X-Token')) {
            throw new BusinessException(ErrorCode::NEED_LOGIN, '暂未登录');
        }
       
        $request_token = $request->getHeader('x-Token')[0]??'';
        if(!$request_token){
            throw new BusinessException(ErrorCode::LOGIN_INFO_EXPIRED, '登录已失效');
        }
        $request_token = json_decode($request_token,true);
        $uid = $token->check($request_token['token']);

        if (! $uid) {
            throw new BusinessException(ErrorCode::LOGIN_INFO_EXPIRED, '登录已失效');
        }
        // TODO 实时检查Token匹配的账号是否被封禁
        $request = $request->withAttribute('uid', $uid);

        Context::set(ServerRequestInterface::class, $request);

        return $handler->handle($request);
    }
}

在登录后的所有接口启用

简单启动，修改代理

拉取代码：

git@github.com:koala9527/Gin-Vue-ElementUI.git

打开子文件夹vue-admin,npm install安装依赖，修改.env文件：

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://localhost:9551'

后续接口路径改动

根据之前的element admin 的接口路径重新更改接口路径，增加一个后台用户信息

App\Controller\LoginController.php:

...
/**
 * @Controller(prefix="/admin/user")
 */
class LoginController extends AbstractController
{
...

/**
 * 用户信息.
 * @RequestMapping(path="info", methods="post")
 * @Middleware(AuthMiddleware::class)
 */
public function info(RequestInterface $request)
{
    $uid = $request->getAttribute('uid');
    $user_info = Admin::select('user_name','avatar')->where('id',$uid)->first();
    return $this->success($user_info?$user_info->toArray():[]);
}

还需要在数据库加一个字段，为了在后台首页能看到头像

最后看看效果：

总结

今天尝试了很多Vue3的项目筋疲力尽，最后只有躺平做Vue2了，后面接着仔细研究这个Vue2的Element Admin的小技巧和慢慢接触Vue3，TypeScript，感觉TypeScript的引入让Vue的入门门槛提高了，对于我这样的非专业的前端是在是折磨，还有Vue3的组合式Api，虽然说是复用了很多的代码，看起来封装过后很优雅，但是这些优化都是对于复杂项目而去想办法优化了，增加一些心智负担，对于入门还是慢慢来，先使用Vue2。

放弃Vue3使用Vue2 的element admin后台框架对接Hyperf接口

前言

后端接口增加跨域中间件和鉴权中间件

简单启动，修改代理

后续接口路径改动

总结