vue返回上级并且携带数据_前后端分离之后端返回用户角色信息（vueelementadmin+laravel）...

通过之前对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权限管理之路由解读

2020-07-09

前后端分离之获取用户信息

2020-07-05

vue-element-admin之存储access_token(含源码分析)

2020-07-04

利用vue-element-admin/ui简单测试JWT

2020-07-03

对jwt-auth官方手册的一些修订(附完整代码)

2020-07-02