权限组管理
前端页面设计
使用到了Collapse折叠面板、Tree树型控件
<template>
<div>
<div>
<el-input placeholder="请输入角色英文名称" v-model="role.name" style="width: 300px;margin-right: 10px">
<template slot="prepend">ROLE_</template>
</el-input>
<el-input placeholder="请输入角色中文名称" v-model="role.nameZh" style="width: 300px;margin-right: 10px">
</el-input>
<el-button type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button>
</div>
<div style="margin-top: 10px">
<el-collapse accordion @change="change" v-model="activeName">
<el-collapse-item :title="item.nameZh" :name="item.id" v-for="(item,index) in roles" :key="index">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>可访问的资源</span>
<el-button style="float: right; padding: 3px 0;color: #ff0000" icon="el-icon-delete" @click="deleteRole(item)"
type="text"></el-button>
</div>
<div>
<!-- :key="index"为了在循环中区分-->
<el-tree show-checkbox
:data="allmenus"
:props="defaultProps"
node-key="id"
ref="tree"
:key="index"
:default-checked-keys="selectedMenus"></el-tree>
<div style="display: flex;justify-content: flex-end">
<el-button size="small" @click="cancelUpdate">取消修改</el-button>
<el-button size="small" type="primary" @click="doUpdate(item.id,index)">确认修改</el-button>
</div>
</div>
</el-card>
</el-collapse-item>
</el-collapse>
</div>
</div>
</template>
<script>
export default {
name: "PermissMana",
data() {
return {
activeName:-1,
role: {
name: '',
nameZh: ''
},
roles: [],
allmenus: [],
defaultProps: {
children: 'children',
label: 'name'
},
selectedMenus: []
}
}, methods: {
deleteRole(item){
this.$confirm('此操作将永久删除【' + item.nameZh + '】角色, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest("/system/basic/permiss/role/"+item.id).then(resp => {
if (resp) {
this.initRoles()
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
addRole(){
if (this.role.name!=null&&this.role.nameZh!=null){
this.postRequest("/system/basic/permiss/role",this.role).then(resp=>{
if (resp){
this.initRoles()
}
})
}else{
this.$message.error("所有字段不可为空")
}
},
cancelUpdate(){
this.activeName=-1
},
doUpdate(rid, index) {
console.log(rid)
let tree = this.$refs.tree[index];
let selectedKey = tree.getCheckedKeys(true);//true只返回叶子节点
let url = '/system/basic/permiss/?rid=' + rid;
console.log(selectedKey)
selectedKey.forEach(key => {
url += '&mids=' + key;
})
this.putRequest(url).then(resp=>{
if (resp) {
this.initRoles()
this.activeName=-1
}
})
},
initRoles() {
this.getRequest("/system/basic/permiss/").then(resp => {
if (resp) {
this.roles = resp;
}
})
},
change(rid) {
if (rid) {
this.initAllMenus()
this.initSelectedMenus(rid)
}
},
initSelectedMenus(rid) {
this.getRequest("/system/basic/permiss/mids/" + rid).then(resp => {
if (resp) {
this.selectedMenus = resp
}
})
},
initAllMenus() {
this.getRequest("/system/basic/permiss/menus").then(resp => {
if (resp) {
this.allmenus = resp;
}
})
}
}, mounted() {
this.initRoles();
}
}
</script>
<style scoped>
</style>
后端接口开发
controller：
@RestController
@RequestMapping("/system/basic/permiss")
public class PermissController {
@Autowired
RoleService roleService;
@Autowired
MenuService menuService;
@Autowired
@GetMapping("/")
public List<Role> getAllRoles(){
return roleService.getAllRoles();
}
@GetMapping("/menus")
public List<Menu> getAllMenus(){
return menuService.getAllMenus();
}
@GetMapping("/mids/{rid}")
public List<Integer> getMidsByRid(@PathVariable Integer rid){
return menuService.getMidsByRid(rid);
}
@PutMapping("/")
public RespBean updateMenuRole(Integer rid,Integer[] mids){
if (menuService.updateMenuRole(rid,mids)){
return RespBean.ok("更新成功");
}else{
return RespBean.error("更新失败");
}
}
@PostMapping("/role")
public RespBean addRole(@RequestBody Role role){
if (roleService.addRole(role)==1){
return RespBean.ok("添加成功");
}else{
return RespBean.error("添加失败");
}
}
@DeleteMapping("/role/{rid}")
public RespBean deleteRole(@PathVariable int rid){
if (roleService.deleteRole(rid)==1){
return RespBean.ok("删除成功");
}
return RespBean.error("删除失败");
}
}
service：
@Service
public class RoleService {
@Autowired
RoleMapper roleMapper;
public List<Role> getAllRoles() {
return roleMapper.getAllRoles();
}
public int addRole(Role role) {
if (!role.getName().startsWith("ROLE_")){
role.setName("ROLE_"+role.getName());
}
return roleMapper.insert(role);
}
public int deleteRole(int id) {
return roleMapper.deleteByPrimaryKey(id);
}
}
//menuservice
public List<Integer> getMidsByRid(Integer rid) {
return menuMapper.getMidsByRid(rid);
}
@Transactional
public boolean updateMenuRole(Integer rid, Integer[] mids) {
menuRoleMapper.deleteByRid(rid);
if (mids == null || mids.length == 0) {
return true;
}
Integer result = menuRoleMapper.insertRecord(rid, mids);
return result == mids.length;
}
登录问题完善
问题：当服务端重启时，没有session信息了，前端需要重新认证，但没有自动跳转回登陆页
解决：
springsecurityconfig.java中返回一个401的状态码
@Override
public void commence(HttpServletRequest req, HttpServletResponse resp, AuthenticationException e) throws IOException, ServletException {
resp.setContentType("application/json;charset=utf-8");
resp.setStatus(401);
前端请求api中：
else if (error.response.status == 401) {
Message.error({message: '请先登录'});
router.replace('/');
来源：CSDN
作者：bbbsun
链接：https://blog.csdn.net/sinat_40558934/article/details/104009407