本文作者:开源技术之家

前后端分离之后端返回用户角色信息(vue-element-admin+laravel)

开源技术之家 1个月前 ( 09-23 ) 90 抢沙发




通过之前对vue-element-admin路由的解析,可以得知后端需向前端返回用户端的角色信息,前端在拿到用户的角色信息之后才能去拼装最终生成的路由信息。

我们先看前端需要什么样的数据格式,我们打开mock/user.js,看到用户的格式大致如下:





{
    roles: ['admin'],
    introduction: 'I am a super administrator',
    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
    name: 'Super Admin'
}





我们注意到其中的roles字段是一个数组,那么我们在后端生成数据时也要尽量返回这种数组格式,方便我们前端使用。








后端的角色权限管理我们使用的是spatie/laravel-permission,这个组件的安装与使用我们之前已经进行了介绍,大家可以去GitHub或者百度他的用法,非常简单,基本思想还是RBAC,并结合了Laravel的一些特性。

之前我们也讲过怎么获取到用户信息,即:





auth()->roles()





现在我们需要把用户的角色信息加入其中,并把用户一些不想返回给前端的信息给过滤掉。

想要把角色信息关联到用户上是非常简单的(请大家自行在数据库中添加数据):





public function me()
{
     $user = auth()->user()->with('roles:name')->get();
     return response()->json([
        'code'  => 20000,
        'data'  => $user
    ]);
}





但是返回个json结构却不是前端想要的,而且也不方便前端处理:




{
    "code": 20000,
    "data": [
        {
            "id": 1,
            "username": "xiaoming",
            "nickname": "",
            "email": "123@qq.com",
            "created_at": "2020-06-30 10:01:25",
            "updated_at": "2020-06-30 10:01:25",
            "roles": [
                {
                    "name": "admin",
                    "pivot": {
                        "model_id": 1,
                        "role_id": 1,
                        "model_type": "App\\User"
                    }
                },
                {
                    "name": "editor",
                    "pivot": {
                        "model_id": 1,
                        "role_id": 2,
                        "model_type": "App\\User"
                    }
                }
            ]
        }
    ]
}





我们希望返回的roles是一个没有key值的索引数组,但却返回了关联数组,并且还携带了中间表的信息。

经过多次尝试,发现一行代码就获取到想要的数据没法做到,我们把代码进行拆分:





public function me()
{
    $user = auth()->user()->makeHidden(['created_at','updated_at','nickname']);
    $roles = $user->roles()->pluck('name');
    $user->roles = $roles;
    return response()->json([
        'code'  => 20000,
        'data'  => $user
    ]);
}





其中的makeHidden是把我们不想返回给前端的字段给隐藏了,pluck用于获取某一列的值,具体用法可以查看手册。

这样返回给前端的json为(本节主要讲解roles,其余的字段都是字符串,大家自行处理,只要前后端一致即可):





{
    "code": 20000,
    "data": {
        "id": 1,
        "username": "xiaoming",
        "email": "123@qq.com",
        "roles": [
            "admin",
            "editor"
        ]
    }
}





拿到我们的roles信息,前端就可以根据角色来匹配用户能够访问的路由了。





本文标题:前后端分离之后端返回用户角色信息(vue-element-admin+laravel)
本文链接:https://www.kyjszj.com/htzq/2308.html
作者授权:除特别说明外,本文由 开源技术之家 原创编译并授权 开源技术之家 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
文章版权及转载声明

作者:开源技术之家本文地址:https://www.kyjszj.com/htzq/2308.html发布于 1个月前 ( 09-23 )
文章转载或复制请以超链接形式并注明出处开源技术之家

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,90人围观)参与讨论

还没有评论,来说两句吧...