VUE+JWT实现权限管理

最近项目要重构权限这一块，后台使用ＪＷＴ token存在redis中JWT就不细说了(也可以使用shiro可自行选择)，详情可百度，主要说一下实现

１．创建表resourcr(资源表，前台菜单显示的信息),user(用户表，用户的个人信息),role(角色表),user_role(用户与角色对应表),role_resource(角色资源对应表存的都是表主键ｉｄ)

主要思想：创建用户，给用户分配角色，角色加载对应的权限（菜单的ｕｒｌ）再用户登录的时候，根据角色查找资源，根据资源找到权限，最后返回tree树型结构,前台加载菜单显示

2．后台生成tree

根据需求自行创建实体类

package cn.rocketai.saas.domain.vo;

import java.util.List;

/** Author: dengWenBo Date: 19-2-20 */
public class MenuNode {
private String id;
private String label;
private String pid;
private String title;
private String level;
private String icon;
private String url;
private boolean expand = true; // 节点是否展开 默认true
private boolean checked = false; // 选中显示勾选框
private boolean selected = false; // 选中显示勾选背景
private List<MenuNode> children = null;

public MenuNode() {
super();
}

public MenuNode(
String id,
String label,
String pid,
String title,
String level,
String icon,
String url,
boolean expand,
boolean checked,
boolean selected) {
super();
this.id = id;
this.label = label;
this.pid = pid;
this.title = title;
this.level = level;
this.icon = icon;
this.url = url;
this.expand = expand;
this.checked = checked;
this.selected = selected;
}

public String getId() {
return id;
}

public void setId(String id) {
this.id = id;
}

public String getLabel() {
return label;
}

public void setLabel(String label) {
this.label = label;
}

public String getPid() {
return pid;
}

public void setPid(String pid) {
this.pid = pid;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public List<MenuNode> getChildren() {
return children;
}

public void setChildren(List<MenuNode> children) {
this.children = children;
}

public boolean isExpand() {
return expand;
}

public void setExpand(boolean expand) {
this.expand = expand;
}

public boolean isChecked() {
return checked;
}

public void setChecked(boolean checked) {
this.checked = checked;
}

public boolean isSelected() {
return selected;
}

public void setSelected(boolean selected) {
this.selected = selected;
}

public String getLevel() {
return level;
}

public void setLevel(String level) {
this.level = level;
}

public String getIcon() {
return icon;
}

public void setIcon(String icon) {
this.icon = icon;
}

public String getUrl() {
return url;
}

public void setUrl(String url) {
this.url = url;
}
}

主要实现类结果返回tree结构

@Override
public Map<String, Object> treeNode( List<Resources> resources) {
Map<String, Object> map = new HashMap<>();
List<MenuNode> menuNodeList = Lists.newArrayList();
for (Resources res :resources ) {
MenuNode node = new MenuNode();
node.setId(String.valueOf(res.getId()));
node.setPid(res.getPid());
node.setLabel(res.getResourceName());
node.setTitle(res.getResourceName());
node.setLevel(String.valueOf(res.getLevel()));
node.setIcon(res.getIcon());
node.setUrl(res.getUrl());
menuNodeList.add(node);
}
List<MenuNode> menuNodeTree = Lists.newArrayList();
for (MenuNode node : menuNodeList) {
if (StringUtils.equals(node.getPid(), "0")) {
menuNodeTree.add(node);
}
// 找子节点
for (MenuNode modeTree : menuNodeList) {
if (StringUtils.equals(modeTree.getPid(), node.getId())) {
if (node.getChildren() == null) {
node.setChildren(new ArrayList<>());
}
node.getChildren().add(modeTree);
}
}
}
map.put("data", menuNodeTree);
return map;
}

3.前台接收数据,vue生成无限菜单

创建sideMenuItem.vue 子主键

<template>
<Submenu :name="parentItem.title">
<template slot="title">
<Icon :type="parentItem.icon" :size="15"/>
<span style="font-size: 15px">{{ parentItem.title }}</span>
</template>
<template v-for="item in parentItem.children">
<side-menu-item
v-if="item.children&&item.children.length!==0"
:parent-item="item"
:key="'menu-'+item.id"
>
</side-menu-item>
<menu-item v-else :name="item.url" :key="'menu-'+item.id">
<!-- <Icon :type="item.icon" :size="15" />-->
<span>{{ item.title }}</span>
</menu-item>
</template>
</Submenu>
</template>

<script>
export default {
name: 'sideMenuItem',
props: {
parentItem: {
type: Object,
default: () => {}
}
}
}
</script>

<style lang="less" scoped>

</style>

父主键 sideMenuItem.vue

<template>
<div class="sideMenu">
<Menu width="auto"
:active-name="activeName"
:open-names="openNames"
@on-select="handleSelect"
>
<template v-for="item in itemList">
<side-menu-item
v-if="item.children&&item.children.length!==0"
:parent-item="item"
:key="'menu-'+item.id"
>
</side-menu-item>
<menu-item v-else
:name="item.url"
:key="'menu-'+item.id"
>
<Icon :type="item.icon" :size="15"/>
<span>{{ item.title }}</span>
</menu-item>
</template>
</Menu>
</div>
</template>

<script>
import sideMenuItem from '../components/sideMenuItem'
import Bus from '../components/bus.js'

export default {
name: 'pageFooter',
data() {
return {

roleIds: window.localStorage.getItem('roleIds'),
activeName: '',//选中那个菜单
openNames: [''], //打开选中菜子项
itemList: [],
changeUrl: ''
}
},
created() {
this.getResource();
this.getChangeUrl();
},
methods: {
getResource(){
this.$ajax({
method: 'post',
url: 你自己获取treeList接口地址,
params: data
}).then(response => {

var res = response.data;
if (res && res.code === '0') {

this.itemList  = res.data.data;
}  else {
this.$Message.error(res.msg);
}
}, error => {
this.loading = false;

if (error.response) {
const _result = error.response.data;

if (_result && _result.msg) {
this.$Message.error(_result.msg);
} else {
this.$Message.error('网络异常，请稍后再试！');
}
}
})
}
handleSelect(url) {
this.$emit('on-select', url);
this.$router.push({
path: url
})
},
getChangeUrl() {
let self = this;
Bus.$on('change', (e) => {
self.activeName = e;
})
},
},
components: {
sideMenuItem,
Bus
},
}
</script>

<style lang="less" scoped>
.sideMenu {
padding: 30px 0 0 0;
width: 160px;
background-color: #fff;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);

}
.ivu-menu-item {
height: 60px;
}

</style>

最总显示结果