通过之前对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
![518322575bad04070cf99a934dcfb870.png](https://i-blog.csdnimg.cn/blog_migrate/f228c4113863be220f20d7a840bc17a8.jpeg)
前后端分离之获取用户信息
2020-07-05
![18ff74b57b8b273fdac6652961215271.png](https://i-blog.csdnimg.cn/blog_migrate/26ad278a4f3238bee2d84601b3b451a7.jpeg)
vue-element-admin之存储access_token(含源码分析)
2020-07-04
![f3d6b29fe1f873a61acaf5e54b834431.png](https://i-blog.csdnimg.cn/blog_migrate/a502cfba95faa4b20da3cb642ae7d529.jpeg)
利用vue-element-admin/ui简单测试JWT
2020-07-03
![ca2ba7442e0486867552f84b05724873.png](https://i-blog.csdnimg.cn/blog_migrate/3a23492a7ef05fd1343a55ff0eea889f.jpeg)
对jwt-auth官方手册的一些修订(附完整代码)
2020-07-02
![62ae724eb814d348c7d2716398c54bed.png](https://i-blog.csdnimg.cn/blog_migrate/183918ad575a9a3cc1a7253edc607a89.jpeg)