Merge ea153c1a54 into 4f563a7bfe

src/api/route.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function getRoutes() {
+  return request({
+    url: '/routes',
+    method: 'get'
+  })
+}
+
+export function importRoutes(data) {
+  return request({
+    url: '/routes',
+    method: 'put',
+    data
+  })
+}

src/main.js

@@ -28,9 +28,9 @@ import * as filters from './filters' // global filters
  * please remove it before going online! ! !
  */
 import { mockXHR } from '../mock'
-if (process.env.NODE_ENV === 'production') {
-  mockXHR()
-}
+// if (process.env.NODE_ENV === 'production') {
+mockXHR()
+// }
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size

src/router/index.js

@@ -395,6 +395,26 @@ const createRouter = () => new Router({
 
 const router = createRouter()
 
+if (process.env.NODE_ENV === 'development') {
+  router.addRoutes([
+    {
+      path: '/',
+      component: Layout,
+      redirect: '/dashboard',
+      children: [
+        {
+          path: 'route',
+          component: () => import('@/views/permission/route'),
+          name: 'Route',
+          meta: {
+            title: 'Route',
+            roles: ['admin']
+          }
+        }
+      ]
+    }])
+}
+
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
   const newRouter = createRouter()

src/store/modules/permission.js

@@ -1,5 +1,6 @@
-import { asyncRoutes, constantRoutes } from '@/router'
-
+import { constantRoutes } from '@/router'
+import { getRoutes } from '@/api/route'
+// const _import = path => import('@/views/' + path)
 /**
  * Use meta.role to determine if the current user has permission
  * @param roles
@@ -18,6 +19,21 @@ function hasPermission(roles, route) {
  * @param routes asyncRoutes
  * @param roles
  */
+
+export function mapAsyncRoutes(routes) {
+  return routes.map(route => {
+    const tmp = { ...route }
+    if (typeof tmp.component === 'string') {
+      const path = tmp.component
+      tmp.component = () => import(`@/${path}`)
+    }
+    if (tmp.children && tmp.children.length) {
+      tmp.children = mapAsyncRoutes(tmp.children)
+    }
+    return tmp
+  })
+}
+
 export function filterAsyncRoutes(routes, roles) {
   const res = []
 
@@ -50,13 +66,17 @@ 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)
+      getRoutes().then(res => {
+        const asyncRoutes = res.data
+        if (roles.includes('admin')) {
+          accessedRoutes = mapAsyncRoutes(asyncRoutes || [])
+        } else {
+          accessedRoutes = mapAsyncRoutes(filterAsyncRoutes(asyncRoutes, roles))
+          debugger
+        }
+        commit('SET_ROUTES', accessedRoutes)
+        resolve(accessedRoutes)
+      })
     })
   }
 }

src/styles/sidebar.scss

@@ -1,3 +1,4 @@
+@import "./variables.scss";
 #app {
 
   .main-container {

src/views/permission/route.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="app-container">
+    <el-button type="primary" style="margin:0 0 20px 0;" @click="handleImport">Import Routes</el-button>
+
+    <el-table :data="routes" style="width: 100%;margin-bottom: 20px;" border row-key="id">
+      <el-table-column v-for="key in keys" :key="key" :prop="key" :label="key" sortable>
+        <template slot-scope="scope">
+          <span>{{ scope.row[key] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import * as Route from '@/api/route'
+import { routes } from '../../../mock/route'
+
+export default {
+  name: 'Route',
+  data() {
+    return {
+      keys: ['name', 'path', 'redirect', 'hidden', 'component', 'meta'],
+      routes: []
+    }
+  },
+  created() {
+    this.getRoutes()
+  },
+  methods: {
+    getRoutes() {
+      Route.getRoutes().then(res => {
+        const { data: routes } = res
+        this.routes = routes
+      })
+    },
+    handleImport() {
+      console.log(JSON.stringify(routes))
+      Route.importRoutes({ routes }).then(res => {
+        this.$message({
+          type: 'success',
+          message: 'Import Success'
+        })
+        this.getRoutes()
+      })
+    }
+  }
+}
+</script>
+