4、Admin 权限分配操作

api权限的分配。
拿到最新的项目首先是F6编译一下。
创建一个新控制器

默认生成包含增删改的api

运行后端api项目，可以搜索到刚才添加的demoApi

运行测试一下

打开admin前端项目，运行起来。

后端使用的注意事项。这里的Name等于Get

再添加一个控制器



创建后，直接运行就会报错




属性路由有相同的Get模板。

一个是在在DefaultController里面一个是在DemoApiController里面。

Name等于Get的Action。第一次添加一个控制器是没有问题的，再添加一个控制器就会报错。

可以把Name等于get去掉就可以了

前端

配置刚才控制器添加的接口。


当前测试账号不能添加、删除和编辑操作。

使用超级管理员登陆

需要修改管理员的密码。把test密码复制给admin





在本系统里面判断权限是在route后面加了Action。通过Action的名字来判断的。这种写方法，可以。但是不可取。这么加的话，就不是原则意义上的Restful风格了。


如果是自己开发的话，尽量是url+谓词的方式。
前面url相同 后面的请求方式不同，就是post、get、put、delete这些方式。大概就是这个意思。


加上Action后，接口发生了变化。接口地址就带上了Action的名字。

添加接口。

接口添加好了。

配置菜单

views下新建Demo文件夹，然后在文件夹下新建Index.vue

前端随便写点东西

这样页面就算市创建好了。

页面创建好后，录入到系统内。

icon在这里找的






然后这里的图标就添加上了。 

添加二级菜单

菜单并不是每次都是从后台读取的。存储在LocalStorage里面的有一个router路由。


所以添加了新的菜单需要退出重新登陆系统。
还需要给这个角色配置上菜单。当前登陆的是超级管理员。角色是SuperAdmin





设置成功后，再重新登陆系统
路由地址需要改成大小写对应的



路由的配置，主要是这块的代码。

读取api

导出一个demo模块。所有的api接口全部在api/api.js这里面。

在mounted钩子函数内执行访问后端接口的方法

重新登陆前端。可以看到访问到了数据。


输入res.data

页面权限问题

添加上权限

基于角色的是这么写的。但是这么就写死了。


我们是基于策略的，都配置在数据库内了



前面的Policy可以省略

权限统一走的策略授权

加上权限后，这里访问后端接口数据。提示是路由的拦截器


拦截器。request是请求的拦截器

增加权限

菜单默认带的是get方法。意思是我们把这个首页分配给当前角色的时候，它所定义的api也赋值给他了。

那么我们拉请求另外一个api。后算修改下delete的action




removeDemos肯定是无权限的，因为没有配置。

第一个请求是200，第二个请求是403错误




菜单管理，注意：删除不是一个页面。我们当做按钮来处理



分配权限，这里有个删除


退出后台，重新登陆。再次访问


注意事项：一般是一个请求执行完成后，再去执行另外一个请求。

结束