feat(index): 登录权限改造

src/layout/components/Navbar.vue

@@ -9,11 +9,12 @@
         </el-badge>
         <el-select v-model="$store.state.user.classification" placeholder="请选择" @change="selectChange">
           <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in $store.getters.opts"
+            :key="item.title"
+            :label="item.title"
+            :value="item.name"
           />
+          <el-option value="loginout" label="注销登录" />
         </el-select>
       </div>
     </div>
@@ -47,21 +48,7 @@ export default {
       obj: {
         'background-image': 'url(' + require('@/assets/3-主概览/主概览背景.png') + ')',
         'background-size': '100%'
-      },
-      options: [
-        {
-          value: 'reagent',
-          label: '试剂管理'
-        },
-        {
-          value: 'user',
-          label: '用户管理'
-        },
-        {
-          value: 'loginout',
-          label: '注销登录'
-        }
-      ]
+      }
     }
   },
   methods: {
@@ -75,7 +62,7 @@ export default {
         this.$router.push('/login')
         return
       }
-      this.$router.push('/' + val)
+      this.$router.push(this.$store.getters.opts.find(item => item.name === val).router.path)
     }
   }
 }

src/permission.js

@@ -1,10 +1,10 @@
-import router, { asyncRoutes, resetRouter } from './router'
+import router, { resetRouter } from './router'
 import store from './store'
 // import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import getPageTitle from '@/utils/get-page-title'
-import { filterAsyncRoutes } from '@/utils'
+import { filterAsyncRoutes, getALLRouter } from '@/utils'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -44,11 +44,9 @@ router.beforeEach(async(to, from, next) => {
         next()
       } else {
         store.commit('user/SET_CLASS', pat)
-        const asr = filterAsyncRoutes(asyncRoutes, store.getters.roleData.drug_manage)
-        // store.commit('permission/SET_ROUTES', asr)
-        // store.commit('permission/SET_ROUTES', asyncRoutes)
+        const { asyncRoutes } = getALLRouter(store.getters.roleData)
         resetRouter()
-        router.addRoutes(asr)
+        router.addRoutes(asyncRoutes)
         next({ ...to, replace: true })
       }
     }

src/router/index.js

@@ -4,8 +4,6 @@ import Router from 'vue-router'
 Vue.use(Router)
 
 /* Layout */
-import reagentRouter from './modules/reagent'
-import userRouter from '@/router/modules/user'
 import Layout from '@/layout'
 
 /**
@@ -68,12 +66,6 @@ export const constantRoutes = [
   }
 ]
 
-export const asyncRoutes = [
-  ...reagentRouter,
-  ...userRouter,
-  // 404 page must be placed at the end !!!
-  { path: '*', redirect: '/404', hidden: true }
-]
 const createRouter = () => new Router({
   // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),

src/store/getters.js

@@ -5,8 +5,10 @@ const getters = {
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   permission_routes: state => state.permission.routes,
+  add_routers: state => state.permission.addRoutes,
   classification: state => state.user.classification,
   isMain: state => state.settings.isMain,
-  roleData: state => state.permission.roleData
+  roleData: state => state.permission.roleData,
+  opts: state => state.permission.opts
 }
 export default getters

src/store/modules/permission.js

@@ -1,43 +1,13 @@
-import { asyncRoutes, constantRoutes } from '@/router'
-
-/**
- * Use meta.role to determine if the current userinfo has permission
- * @param roles
- * @param route
- */
-function hasPermission(roles, route) {
-  if (route.meta && route.meta.roles) {
-    return roles.some(role => route.meta.roles.includes(role))
-  } else {
-    return true
-  }
-}
-
-/**
- * Filter asynchronous routing tables by recursion
- * @param routes asyncRoutes
- * @param roles
- */
-export function filterAsyncRoutes(routes, roles) {
-  const res = []
-
-  routes.forEach(route => {
-    const tmp = { ...route }
-    if (hasPermission(roles, tmp)) {
-      if (tmp.children) {
-        tmp.children = filterAsyncRoutes(tmp.children, roles)
-      }
-      res.push(tmp)
-    }
-  })
-
-  return res
-}
+import router, { constantRoutes } from '@/router'
+import { user_power } from '@/api/user/user'
+import { getALLRouter } from '@/utils'
 
 const state = {
   routes: [],
   addRoutes: [],
-  roleData: {}
+  // 存储home页区块路由，下拉选项路由
+  roleData: {},
+  opts: []
 }
 
 const mutations = {
@@ -47,20 +17,25 @@ const mutations = {
   },
   SET_ROLE_DATA: (state, data) => {
     state.roleData = data
+  },
+  SET_OPTS: (state, opt) => {
+    state.opts = opt
   }
 }
 
 const actions = {
-  generateRoutes({ commit }, roles) {
-    return new Promise(resolve => {
-      let accessedRoutes
-      if (roles.includes('admin')) {
-        accessedRoutes = asyncRoutes || []
-      } else {
-        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-      }
-      commit('SET_ROUTES', accessedRoutes)
-      resolve(accessedRoutes)
+  generateRoutes({ commit }) {
+    return new Promise((resolve, reject) => {
+      user_power().then(res => {
+        const { asyncRoutes, option } = getALLRouter(res.data)
+        commit('SET_OPTS', option)
+        commit('SET_ROLE_DATA', res.data)
+        commit('SET_ROUTES', asyncRoutes)
+        router.addRoutes(asyncRoutes)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
     })
   }
 }

src/utils/index.js

@@ -2,6 +2,9 @@
  * Created by PanJiaChen on 16/11/18.
  */
 
+import reagentRouter from '@/router/modules/reagent'
+import userRouter from '@/router/modules/user'
+
 /**
  * Parse the time to string
  * @param {(Object|string|number)} time
@@ -151,9 +154,6 @@ export function throttle(fn, time) {
 
 export function filterAsyncRoutes(routers, roles) {
   return routers.filter(item => {
-    if (item.path === '*') {
-      return true
-    }
     if (item.meta && item.meta.title === '返回主页') {
       return true
     }
@@ -161,3 +161,28 @@ export function filterAsyncRoutes(routers, roles) {
   })
 }
 
+export function getALLRouter(data) {
+  // TODO 其他路由都在此操作
+  const rasr = filterAsyncRoutes(reagentRouter, data.drug_manage)
+  const uasr = filterAsyncRoutes(userRouter, data.drug_manage)
+  const asyncRoutes = [
+    ...rasr,
+    ...uasr,
+    // 404 page must be placed at the end !!!
+    { path: '*', redirect: '/404', hidden: true }
+  ]
+  const option = [
+    {
+      name: 'reagent',
+      router: rasr[0],
+      title: '试剂管理'
+    },
+    {
+      name: 'user',
+      router: uasr[0],
+      title: '用户管理'
+    }
+  ]
+  return { asyncRoutes, option }
+}
+

src/views/home/index.vue

@@ -7,11 +7,11 @@
     </div>
     <div class="home-content">
       <div class="home-pic">
-        <div class="home-pic-item" @click="picClick('/reagent')"><img src="@/assets/2-主界面/试剂管理.png" alt=""></div>
+        <div class="home-pic-item" @click="picClick('reagent')"><img src="@/assets/2-主界面/试剂管理.png" alt=""></div>
         <div key="2" class="home-pic-item"><img src="@/assets/2-主界面/标准品管理.png" alt=""></div>
         <div key="3" class="home-pic-item"><img src="@/assets/2-主界面/耗材管理.png" alt=""></div>
         <div key="4" class="home-pic-item"><img src="@/assets/2-主界面/仪器管理.png" alt=""></div>
-        <div key="5" class="home-pic-item" @click="picClick('/user')"><img src="@/assets/2-主界面/用户管理.png" alt=""></div>
+        <div key="5" class="home-pic-item" @click="picClick('user')"><img src="@/assets/2-主界面/用户管理.png" alt=""></div>
       </div>
       <div class="home-menu">
         <div v-for="item in 9" :key="item" class="home-menu-item">
@@ -28,7 +28,8 @@ export default {
   name: 'Home',
   methods: {
     picClick(name) {
-      this.$router.push(name)
+      const r = this.$store.getters.opts.find(item => item.name === name)
+      this.$router.push(r.router.path)
     }
   }
 }

src/views/login/index.vue

@@ -70,9 +70,8 @@
 <script>
 // import { validUsername } from '@/utils/validate'
 import stringify from '@/utils/stringify'
-import { login, user_power } from '@/api/user/user'
-import { asyncRoutes } from '@/router'
-import { filterAsyncRoutes } from '@/utils'
+import { login } from '@/api/user/user'
+
 export default {
   name: 'Login',
   data() {
@@ -132,17 +131,8 @@ export default {
           this.loading = true
           login(stringify(this.loginForm)).then(res => {
             this.$store.commit('user/SET_TOKEN', res.data.token)
-            // this.$store.commit('permission/SET_ROUTES', asyncRoutes)
-            // this.$router.addRoutes(asyncRoutes)
-            // this.$router.replace('/home')
-            user_power().then(resp => {
-              // 存储权限数据
-              this.$store.commit('permission/SET_ROLE_DATA', resp.data)
-              const asr = filterAsyncRoutes(asyncRoutes, resp.data.drug_manage)
-              this.$store.commit('permission/SET_ROUTES', asr)
-              this.$router.addRoutes(asr)
-              this.$router.replace('/home')
-            })
+            this.$store.dispatch('permission/generateRoutes')
+            this.$router.replace('/home')
           }).finally(
             () => {
               this.loading = false