permission

src/permission.js

@@ -37,6 +37,7 @@ router.beforeEach(async(to, from, next) => {
 
           // generate accessible routes map based on roles
           const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+          run()
           console.log(accessRoutes)
 
           // dynamically add accessible routes
@@ -72,3 +73,11 @@ router.afterEach(() => {
   // finish progress bar
   NProgress.done()
 })
+
+function sleep(time) {
+  return new Promise((resolve) => setTimeout(resolve, time))
+}
+
+async function run() {
+  await sleep(2000)
+}

src/router/index.js

@@ -96,150 +96,9 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/announcement',
-    component: Layout,
-    redirect: '/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/announcement/index'),
-        name: 'Announcement',
-        meta: { title: '公告', icon: 'documentation' }
-      }
-    ]
-  }, {
-    path: '/audit',
-    component: Layout,
-    redirect: '/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/audit/index'),
-        name: 'Audit',
-        meta: { title: '审核', icon: 'audit' }
-      }
-    ]
-  }, {
-    path: '/email',
-    component: Layout,
-    redirect: '/index',
-    meta: {
-      title: '邮件',
-      icon: 'email'
-    },
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/email/list'),
-        name: 'EmailList',
-        meta: { title: '邮件列表' },
-        hidden: false
-      },
-      {
-        path: 'create',
-        component: () => import('@/views/email/create'),
-        name: 'EmailCreate',
-        meta: { title: '发布邮件' },
-        hidden: false
-      }, {
-        path: 'update/:mailid',
-        component: () => import('@/views/email/create'),
-        name: 'EmailUpdate',
-        meta: { title: '修改邮件' },
-        hidden: true
-      }, {
-        path: 'user_group/index',
-        component: () => import('@/views/email/user_group_list'),
-        name: 'UserGroupList',
-        meta: { title: '用户组列表' },
-        hidden: false
-      }, {
-        path: 'user_group/member',
-        component: () => import('@/views/email/group_member'),
-        name: 'GroupMember',
-        meta: { title: '组成员' },
-        hidden: true
-      }
-    ]
-  }, {
-    path: '/player',
-    component: Layout,
-    redirect: '/index',
-    meta: {
-      title: '玩家信息查询',
-      icon: 'user'
-    },
-    children: [
-      {
-        path: 'info',
-        component: () => import('@/views/player/info'),
-        name: 'playerinfo',
-        meta: { title: '玩家查询' },
-        hidden: false
-      }, {
-        path: 'bagquery',
-        component: () => import('@/views/player/bagquery'),
-        name: 'bagquery',
-        meta: { title: '玩家背包查询' },
-        hidden: false
-      }, {
-        path: 'heroesquery',
-        component: () => import('@/views/player/heroesquery'),
-        name: 'heroesquery',
-        meta: { title: '玩家英雄查询' },
-        hidden: false
-      }, {
-        path: 'goldbullionquery',
-        component: () => import('@/views/player/goldbullionquery'),
-        name: 'goldquery',
-        meta: { title: '金币查询' },
-        hidden: false
-      }, {
-        path: 'ticketconsumequery',
-        component: () => import('@/views/player/ticketconsumequery'),
-        name: 'ticketquery',
-        meta: { title: '门票消耗查询' },
-        hidden: false
-      }, {
-        path: 'gamemallquery',
-        component: () => import('@/views/player/gamemallquery'),
-        name: 'gamemallquery',
-        meta: { title: '游戏内商品查询' },
-        hidden: false
-      }
-    ]
-  }, {
-    path: '/nft',
-    component: Layout,
-    redirect: '/index',
-    meta: {
-      title: '商业信息查询',
-      icon: 'shopping'
-    },
-    children: [
-      {
-        path: 'orderquery',
-        component: () => import('@/views/nft/orderquery'),
-        name: 'orderquery',
-        meta: { title: '订单查询' },
-        hidden: false
-      }, {
-        path: 'salequery',
-        component: () => import('@/views/nft/salequery'),
-        name: 'salequery',
-        meta: { title: '售卖查询' },
-        hidden: false
-      }, {
-        path: 'nftquery',
-        component: () => import('@/views/nft/nftquery'),
-        name: 'nftquery',
-        meta: { title: 'NFT查询' },
-        hidden: false
-      }
-    ]
-  }, {
     path: '*', // 匹配未定义的路由
-    redirect: '/404'// 重定向
+    redirect: '/404', // 重定向
+    hidden: true
   }
   // tableRouter
   // {
@@ -288,7 +147,159 @@ export const constantRoutes = [
  * asyncRoutes
  * the routes that need to be dynamically loaded based on user roles
  */
-// export const asyncRoutes = [
+export const asyncRoutes = [
+  {
+    path: '/announcement',
+    component: Layout,
+    redirect: '/index',
+    meta: {
+      pername: 'announcement'
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/announcement/index'),
+        name: 'Announcement',
+        meta: { title: '公告', icon: 'documentation', pername: 'announcement' }
+      }
+    ]
+  }, {
+    path: '/audit',
+    component: Layout,
+    redirect: '/index',
+    meta: {
+      pername: 'audit'
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/audit/index'),
+        name: 'Audit',
+        meta: { title: '审核', icon: 'audit', pername: 'audit' }
+      }
+    ]
+  }, {
+    path: '/email',
+    component: Layout,
+    redirect: '/index',
+    meta: {
+      title: '邮件',
+      icon: 'email',
+      pername: 'listemail'
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/email/list'),
+        name: 'EmailList',
+        meta: { title: '邮件列表', pername: 'listemail' },
+        hidden: false
+      },
+      {
+        path: 'create',
+        component: () => import('@/views/email/create'),
+        name: 'EmailCreate',
+        meta: { title: '发布邮件', pername: 'createemail' },
+        hidden: false
+      }, {
+        path: 'update/:mailid',
+        component: () => import('@/views/email/create'),
+        name: 'EmailUpdate',
+        meta: { title: '修改邮件', pername: 'editemail' },
+        hidden: true
+      }, {
+        path: 'user_group/index',
+        component: () => import('@/views/email/user_group_list'),
+        name: 'UserGroupList',
+        meta: { title: '用户组列表', pername: 'emailgroup' },
+        hidden: false
+      }, {
+        path: 'user_group/member',
+        component: () => import('@/views/email/group_member'),
+        name: 'GroupMember',
+        meta: { title: '组成员' },
+        hidden: true
+      }
+    ]
+  }, {
+    path: '/player',
+    component: Layout,
+    redirect: '/index',
+    meta: {
+      title: '玩家信息查询',
+      icon: 'user',
+      pername: 'playerinfo'
+    },
+    children: [
+      {
+        path: 'info',
+        component: () => import('@/views/player/info'),
+        name: 'playerinfo',
+        meta: { title: '玩家查询', pername: 'playerinfo' },
+        hidden: false
+      }, {
+        path: 'bagquery',
+        component: () => import('@/views/player/bagquery'),
+        name: 'bagquery',
+        meta: { title: '玩家背包查询', pername: 'bagquery' },
+        hidden: false
+      }, {
+        path: 'heroesquery',
+        component: () => import('@/views/player/heroesquery'),
+        name: 'heroesquery',
+        meta: { title: '玩家英雄查询', pername: 'heroesquery' },
+        hidden: false
+      }, {
+        path: 'goldbullionquery',
+        component: () => import('@/views/player/goldbullionquery'),
+        name: 'goldquery',
+        meta: { title: '金币查询', pername: 'goldbullionquery' },
+        hidden: false
+      }, {
+        path: 'ticketconsumequery',
+        component: () => import('@/views/player/ticketconsumequery'),
+        name: 'ticketquery',
+        meta: { title: '门票消耗查询', pername: 'ticketconsumequery' },
+        hidden: false
+      }, {
+        path: 'gamemallquery',
+        component: () => import('@/views/player/gamemallquery'),
+        name: 'gamemallquery',
+        meta: { title: '游戏内商品查询', pername: 'gamemallquery' },
+        hidden: false
+      }
+    ]
+  }, {
+    path: '/nft',
+    component: Layout,
+    redirect: '/index',
+    meta: {
+      title: '商业信息查询',
+      icon: 'shopping',
+      pername: 'orderquery'
+    },
+    children: [
+      {
+        path: 'orderquery',
+        component: () => import('@/views/nft/orderquery'),
+        name: 'orderquery',
+        meta: { title: '订单查询', pername: 'orderquery' },
+        hidden: false
+      }, {
+        path: 'salequery',
+        component: () => import('@/views/nft/salequery'),
+        name: 'salequery',
+        meta: { title: '售卖查询', pername: 'salequery' },
+        hidden: false
+      }, {
+        path: 'nftquery',
+        component: () => import('@/views/nft/nftquery'),
+        name: 'nftquery',
+        meta: { title: 'NFT查询', pername: 'nftquery' },
+        hidden: false
+      }
+    ]
+  }
 //  {
 //     path: '/permission',
 //     component: Layout,
@@ -545,7 +556,7 @@ export const constantRoutes = [
 //
 //   // 404 page must be placed at the end !!!
 //   { path: '*', redirect: '/404', hidden: true }
-// ]
+]
 
 const createRouter = () => new Router({
   // mode: 'history', // require service support

src/store/modules/permission.js

@@ -6,11 +6,14 @@ import { asyncRoutes, constantRoutes } from '@/router'
  * @param route
  */
 function hasPermission(roles, route) {
-  if (route.meta && route.meta.roles) {
+  if (route.meta) {
+    if (route.meta.roles) {
       return roles.some(role => route.meta.roles.includes(role))
-  } else {
+    } else if (route.meta.pername) {
-    return true
+      return checkuipermission(route.meta.pername)
     }
+  }
+  return false
 }
 
 /**
@@ -36,7 +39,8 @@ export function filterAsyncRoutes(routes, roles) {
 
 const state = {
   routes: [],
-  addRoutes: []
+  addRoutes: [],
+  uipermission: {}
 }
 
 const mutations = {
@@ -49,18 +53,38 @@ const mutations = {
 const actions = {
   generateRoutes({ commit }, roles) {
     return new Promise(resolve => {
-      let accessedRoutes
+      // let accessedRoutes
-      if (roles.includes('admin')) {
+      /* if (roles.includes('admin')) {
         accessedRoutes = asyncRoutes || []
-      } else {
+      } else { */
-        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+      const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-      }
+      // }
       commit('SET_ROUTES', accessedRoutes)
       resolve(accessedRoutes)
     })
   }
 }
 
+export function setuipermission(ui) {
+  state.uipermission = JSON.parse(ui)
+}
+
+export function checkuipermission(item) {
+  for (const key in state.uipermission) {
+    if (key === item) {
+      return state.uipermission[key]
+    }
+  }
+
+  for (const key in state.uipermission) {
+    if (key === '*') {
+      return state.uipermission['*']
+    }
+  }
+
+  return false
+}
+
 export default {
   namespaced: true,
   state,

src/store/modules/user.js

@@ -1,6 +1,7 @@
 import { login, logout, getInfo, metamaskLogin } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
+import { setuipermission } from './permission'
 
 const state = {
   token: getToken(),
@@ -47,8 +48,9 @@ const actions = {
   metamaskLogin({ commit }, authData) {
     return new Promise((resolve, reject) => {
       metamaskLogin(authData).then(response => {
-        const { token } = response
+        const { token, ui } = response
         commit('SET_TOKEN', token)
+        setuipermission(ui)
         setToken(token)
         resolve()
       }).catch(error => {
@@ -61,7 +63,7 @@ const actions = {
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
       getInfo().then(response => {
-        const { data } = response
+        const { data, ui } = response
 
         if (!data) {
           reject('Verification failed, please Login again.')
@@ -78,6 +80,7 @@ const actions = {
         // commit('SET_NAME', name)
         //
         // commit('SET_INTRODUCTION', introduction)
+        setuipermission(ui)
         resolve(data)
       }).catch(error => {
         reject(error)

src/views/announcement/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="handleCreate">
+      <el-button v-show="visibleAddannouncement" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleCreate">
         新增公告
       </el-button>
     </div>
@@ -69,7 +69,7 @@
         width="100"
       >
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button v-show="visibleEditannouncement" type="text" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -133,6 +133,7 @@
 // import Pagination from '@/components/Pagination/index.vue'
 import { addAnnc, getAnncList, updateAnnc } from '@/api/announcement'
 import { Message } from 'element-ui'
+import { checkuipermission } from '@/store/modules/permission'
 
 export default {
   components: {
@@ -153,6 +154,8 @@ export default {
       dialogStatus: '',
       listLoading: true,
       anncList: [],
+      visibleAddannouncement: false,
+      visibleEditannouncement: false,
       rules: {
         title: [{ required: true, message: 'title is required', trigger: 'blur' }],
         version: [{ required: true, message: 'version is required', trigger: 'blur' }],
@@ -164,6 +167,17 @@ export default {
   },
   created() {
     this.getList()
+    if (checkuipermission('addannouncement')) {
+      this.visibleAddannouncement = true
+    } else {
+      this.visibleAddannouncement = false
+    }
+
+    if (checkuipermission('editannouncement')) {
+      this.visibleEditannouncement = true
+    } else {
+      this.visibleEditannouncement = false
+    }
   },
   methods: {
     handleUpdate(row) {

src/views/audit/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="handleCreate">
+      <el-button v-show="visibleAddaudit" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleCreate">
         新增
       </el-button>
     </div>
@@ -43,7 +43,7 @@
         label="操作"
       >
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button v-show="visibleEditaudit" type="text" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -86,6 +86,7 @@
 <script>
 // import Pagination from '@/components/Pagination/index.vue'
 import { addAudit, updateAudit, getAuditList } from '@/api/audit'
+import { checkuipermission } from '@/store/modules/permission'
 
 export default {
   components: {
@@ -111,6 +112,17 @@ export default {
   },
   created() {
     this.getList()
+    if (checkuipermission('addaudit')) {
+      this.visibleAddaudit = true
+    } else {
+      this.visibleAddaudit = false
+    }
+
+    if (checkuipermission('editaudit')) {
+      this.visibleEditaudit = true
+    } else {
+      this.visibleEditaudit = false
+    }
   },
   methods: {
     handleUpdate(row) {