通过之前对vue-element-admin路由的解析，可以得知后端需向前端返回用户端的角色信息，前端在拿到用户的角色信息之后才能去拼装最终生成的路由信息。
我们先看前端需要什么样的数据格式，我们打开mock/user.js，看到用户的格式大致如下：
roles: ['admin'], introduction: 'I am a super administrator', avatar: '/f778738c-e4f8-4870-b634-56703b4acafe.gif', name: 'Super Admin' }{
我们注意到其中的roles字段是一个数组，那么我们在后端生成数据时也要尽量返回这种数组格式，方便我们前端使用。
后端的角色权限管理我们使用的是spatie/laravel-permission，这个组件的安装与使用我们之前已经进行了介绍，大家可以去GitHub或者百度他的用法，非常简单，基本思想还是RBAC，并结合了Laravel的一些特性。
之前我们也讲过怎么获取到用户信息，即：
auth()->roles()
现在我们需要把用户的角色信息加入其中，并把用户一些不想返回给前端的信息给过滤掉。
想要把角色信息关联到用户上是非常简单的(请大家自行在数据库中添加数据)：
$user = auth()->user()->with('roles:name')->get(); returnresponse()->json([ 'code'=> 20000, 'data'=> $user ]); }publicfunctionme(){
但是返回个json结构却不是前端想要的，而且也不方便前端处理：
"code": 20000, "data": [ { "id": 1, "username": "xiaoming", "nickname": "", "email": "123@", "created_at": "-06-30 10:01:25", "updated_at": "-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值的索引数组，但却返回了关联数组，并且还携带了中间表的信息。
经过多次尝试，发现一行代码就获取到想要的数据没法做到，我们把代码进行拆分：
$user = auth()->user()->makeHidden(['created_at','updated_at','nickname']); $roles = $user->roles()->pluck('name'); $user->roles = $roles; returnresponse()->json([ 'code'=> 20000, 'data'=> $user ]); }publicfunctionme(){
其中的makeHidden是把我们不想返回给前端的字段给隐藏了，pluck用于获取某一列的值，具体用法可以查看手册。
这样返回给前端的json为(本节主要讲解roles，其余的字段都是字符串，大家自行处理，只要前后端一致即可)：
"code": 20000, "data": { "id": 1, "username": "xiaoming", "email": "123@", "roles": [ "admin", "editor" ] } }{
拿到我们的roles信息，前端就可以根据角色来匹配用户能够访问的路由了。
前后端分离文章
vue-element-admin权限管理之路由解读
-07-09
前后端分离之获取用户信息
-07-05
vue-element-admin之存储access_token(含源码分析)
-07-04
利用vue-element-admin/ui简单测试JWT
-07-03
对jwt-auth官方手册的一些修订(附完整代码)
-07-02
