router.beforeEach((to, from, next) => {NProgress.start() // start progress barto.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))if (getStore('ACCESS_TOKEN')) {/* has token */if (to.path === '/user/login') {next({ path: '/other/list/user-list' })NProgress.done()} else {if (store.getters.roles.length === 0) {store.dispatch('GetInfo').then(res => {const username = res.principal.usernamestore.dispatch('GenerateRoutes', { username }).then(() => {// 根据roles生成可访问的路由表// 动态添加可访问路由表router.addRoutes(store.getters.addRouters)const redirect = decodeURIComponent(from.query.redirect || to.path)if (to.path === redirect) {// hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history recordnext({ ...to, replace: true })} else {// 跳转到目的路由next({ path: redirect })}})}).catch(() => {notification.error({message: '错误',description: '请求用户信息失败，请重试'})store.dispatch('Logout').then(() => {next({ path: '/user/login', query: { redirect: to.fullPath } })})})} else {next()}}} else {if (whiteList.includes(to.name)) {// 在免登录白名单，直接进入next()} else {next({ path: '/user/login', query: { redirect: to.fullPath } })NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it}}
})

const permission = {state: {routers: constantRouterMap,addRouters: []},mutations: {SET_ROUTERS: (state, routers) => {state.addRouters = routersstate.routers = constantRouterMap.concat(routers)}},actions: {GenerateRoutes ({ commit }, data) {return new Promise(resolve => {generatorDynamicRouter(data).then(routers => {commit('SET_ROUTERS', routers)resolve()})})}}
}

import { axios } from '@/utils/request'
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'// 前端路由表
const constantRouterComponents = {// 基础页面 layout 必须引入BasicLayout: BasicLayout,BlankLayout: BlankLayout,RouteView: RouteView,PageView: PageView,// 需要动态引入的页面组件analysis: () => import('@/views/dashboard/Analysis'),workplace: () => import('@/views/dashboard/Workplace'),monitor: () => import('@/views/dashboard/Monitor'),userlist: () => import('@/views/other/UserList')// ...more
}// 前端未找到页面路由（固定不用改）
const notFoundRouter = {path: '*', redirect: '/404', hidden: true
}/*** 获取后端路由信息的 axios API* @returns {Promise}*/
export const getRouterByUser = (parameter) => {return axios({url: '/menu/' + parameter.username,method: 'get'})
}/*** 获取路由菜单信息** 1. 调用 getRouterByUser() 访问后端接口获得路由结构数组* 2. 调用* @returns {Promise<any>}*/
export const generatorDynamicRouter = (data) => {return new Promise((resolve, reject) => {// ajaxgetRouterByUser(data).then(res => {// const result = res.resultconst routers = generator(res)routers.push(notFoundRouter)resolve(routers)}).catch(err => {reject(err)})})
}/*** 格式化 后端 结构信息并递归生成层级路由表** @param routerMap* @param parent* @returns {*}*/
export const generator = (routerMap, parent) => {return routerMap.map(item => {const currentRouter = {// 路由地址 动态拼接生成如 /dashboard/workplacepath: `${item && item.path || ''}`,// 路由名称，建议唯一name: item.name || item.key || '',// 该路由对应页面的 组件component: constantRouterComponents[item.component || item.key],// meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)meta: { title: item.name, icon: item.icon || undefined, permission: item.key && [ item.key ] || null }}// 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠currentRouter.path = currentRouter.path.replace('//', '/')// 重定向item.redirect && (currentRouter.redirect = item.redirect)// 是否有子菜单，并递归处理if (item.children && item.children.length > 0) {// RecursioncurrentRouter.children = generator(item.children, currentRouter)}return currentRouter})
}

/*** 构造菜单树工具类* @author dang**/
public class TreeUtil {protected TreeUtil() {}private final static Long TOP_NODE_ID = (long) 1;/*** 构造前端路由* @param routes* @return*/public static ArrayList<MenuEntity> buildVueRouter(List<MenuEntity> routes) {if (routes == null) {return null;}List<MenuEntity> topRoutes = new ArrayList<>();routes.forEach(route -> {Long parentId = route.getParentId();if (TOP_NODE_ID.equals(parentId)) {topRoutes.add(route);return;}for (MenuEntity parent : routes) {Long id = parent.getId();if (id != null && id.equals(parentId)) {if (parent.getChildren() == null) {parent.initChildren();}parent.getChildren().add(route);return;}}});ArrayList<MenuEntity> list = new ArrayList<>();MenuEntity root = new MenuEntity();root.setName("首页");root.setComponent("BasicLayout");root.setPath("/");root.setRedirect("/other/list/user-list");root.setChildren(topRoutes);list.add(root);return list;}
}

/*** 菜单实体* @author dang**/public class MenuEntity extends CoreEntity {private static final long serialVersionUID = 1L;@TableField("FParentId")private Long parentId;@TableField("FNumber")private String number;@TableField("FName")private String name;@TableField("FPerms")private String perms;@TableField("FType")private int type;@TableField("FLongNumber")private String longNumber;@TableField("FPath")private String path;@TableField("FComponent")private String component;@TableField("FRedirect")private String redirect;@TableField(exist = false)private List<MenuEntity> children;@TableField(exist = false)private MenuMeta meta;@TableField(exist = false)private List<PermissionEntity> permissionList;@Overridepublic int hashCode() {return number.hashCode();}@Overridepublic boolean equals(Object obj) {return super.equals(obj(obj);}public void initChildren() {this.children = new ArrayList<>();}
}

  // 获取用户信息GetInfo ({ commit }) {return new Promise((resolve, reject) => {getInfo().then(response => {const result = responseif (result.authorities) {commit('SET_PERMISSIONS', result.authorities)commit('SET_ROLES', result.principal.roles)commit('SET_INFO', result)} else {reject(new Error('getInfo: roles must be a non-null array !'))}commit('SET_NAME', { name: result.principal.displayName, welcome: welcome() })commit('SET_AVATAR', result.principal.avatar)resolve(response)}).catch(error => {reject(error)})})}

// 定义一些和权限有关的 Vue指令
// 必须包含列出的所有权限，元素才显示
export const hasPermission = {install (Vue) {Vue.directive('hasPermission', {bind (el, binding, vnode) {const permissions = vnode.context.$store.state.user.permissionsconst per = []for (const v of permissions) {per.push(v.authority)}const value = binding.valuelet flag = truefor (const v of value) {if (!per.includes(v)) {flag = false}}if (!flag) {if (!el.parentNode) {el.style.display = 'none'} else {el.parentNode.removeChild(el)}}}})}
}
// 当不包含列出的权限时，渲染该元素
export const hasNoPermission = {install (Vue) {Vue.directive('hasNoPermission', {bind (el, binding, vnode) {const permissions = vnode.context.$store.state.user.permissionsconst per = []for (const v of permissions) {per.push(v.authority)}const value = binding.valuelet flag = truefor (const v of value) {if (per.includes(v)) {flag = false}}if (!flag) {if (!el.parentNode) {el.style.display = 'none'} else {el.parentNode.removeChild(el)}}}})}
}
// 只要包含列出的任意一个权限，元素就会显示
export const hasAnyPermission = {install (Vue) {Vue.directive('hasAnyPermission', {bind (el, binding, vnode) {const permissions = vnode.context.$store.state.user.permissionsconst per = []for (const v of permissions) {per.push(v.authority)}const value = binding.valuelet flag = falsefor (const v of value) {if (per.includes(v)) {flag = true}}if (!flag) {if (!el.parentNode) {el.style.display = 'none'} else {el.parentNode.removeChild(el)}}}})}
}
// 必须包含列出的所有角色，元素才显示
export const hasRole = {install (Vue) {Vue.directive('hasRole', {bind (el, binding, vnode) {const permissions = vnode.context.$store.state.user.rolesconst per = []for (const v of permissions) {per.push(v.authority)}const value = binding.valuelet flag = truefor (const v of value) {if (!per.includes(v)) {flag = false}}if (!flag) {if (!el.parentNode) {el.style.display = 'none'} else {el.parentNode.removeChild(el)}}}})}
}
// 只要包含列出的任意一个角色，元素就会显示
export const hasAnyRole = {install (Vue) {Vue.directive('hasAnyRole', {bind (el, binding, vnode) {const permissions = vnode.context.$store.state.user.rolesconst per = []for (const v of permissions) {per.push(v.authority)}const value = binding.valuelet flag = falsefor (const v of value) {if (per.includes(v)) {flag = true}}if (!flag) {if (!el.parentNode) {el.style.display = 'none'} else {el.parentNode.removeChild(el)}}}})}
}

import Vue from 'vue'
import { hasPermission, hasNoPermission, hasAnyPermission, hasRole, hasAnyRole } from './utils/permissionDirect'Vue.use(hasPermission)
Vue.use(hasNoPermission)
Vue.use(hasAnyPermission)
Vue.use(hasRole)
Vue.use(hasAnyRole)

 <a-button type="primary" @click="handleAddUser()" v-hasPermission="['sys:user:add']" icon="plus">新建</a-button>

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter

@GetMapping
@PreAuthorize("hasAuthority('sys:user:view')")
public Map<String, Object> listUser(QueryRequest queryRequest, UserEntity userEntity) {return getDataTable(userServiceImpl.findUserDetail(userEntity, queryRequest));
}

private Collection<? extends GrantedAuthority> getUserAuthorities(Long uId) {// 用户权限列表，根据用户拥有的权限标识与如 @PreAuthorize("hasAuthority('sys:menu:view')") 标注的接口对比，决定是否可以调用接口Set<String> permissions = menuServiceImpl.findUserPermissions(uId).stream().map(MenuEntity::getPerms).collect(Collectors.toSet());Collection<? extends GrantedAuthority> authorities = AuthorityUtils.createAuthorityList(permissions.toArray(new String[0]));return authorities;}

@Overridepublic UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {UserEntity u=userServiceImpl.getOne(new QueryWrapper<UserEntity>().eq("FUserName",username));if(u!=null) {//设置用户角色和权限List<RoleEntity> roles= (List<RoleEntity>) roleServiceImpl.listByIds((userRoleServiceImpl.list(new QueryWrapper<UserRoleEntity>().eq("FUserId",u.getId()))).stream().map(UserRoleEntity::getRoleId).collect(Collectors.toList()));u.setRoles(roles);Collection<? extends GrantedAuthority> authorities = getUserAuthorities(u.getId());u.setAuthorities(authorities);return u;}else {throw new AuthenticationCredentialsNotFoundException("当前用户不存在");}}