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

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

携手创作,共同成长!这是我参与「掘金日新计划 · 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():[]);
}

复制代码

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

image.png

最后看看效果:

55.gif

总结

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

分类:
后端
收藏成功!
已添加到「」, 点击更改