fixed

src/components/NavMenu.vue

@@ -4,6 +4,27 @@
             mode="inline"
             :defaultSelectedKeys="['1']">
 
+        <template v-for="menu in menus">
+            <a-menu-item :key="menu.id" :name="menu.id" v-if="!menu.children && $router.matcher.match({ name: menu.permission }).matched.length">
+                <router-link :to="{ name: menu.name, params: { pageNo: '1' } }">
+                    <a-icon v-if="menu.meta.icon" :type="menu.meta.icon"></a-icon>
+                    <span>{{ menu.meta.title }}</span>
+                </router-link>
+            </a-menu-item>
+            <a-sub-menu :key="menu.id" :name="menu.id" v-else>
+                <span slot="title"><a-icon :type="menu.meta.icon" v-if="menu.meta.icon" /><span>{{ menu.meta.title }}</span></span>
+                <template v-for="(submenu, index) in menu.children">
+                    <a-menu-item :key="submenu.id" :name="submenu.id">
+                        <router-link :to="{ name: submenu.name, params: { pageNo: '1' } }">
+                            <a-icon v-if="submenu.meta.icon" :type="submenu.meta.icon"></a-icon>
+                            <span>{{ submenu.meta.title }}</span>
+                        </router-link>
+                    </a-menu-item>
+                </template>
+            </a-sub-menu>
+
+        </template>
+        <!--
         <a-sub-menu key="1">
             <span slot="title"><a-icon type="dashboard" /><span>dashboard</span></span>
             <a-menu-item key="11">分析页</a-menu-item>
@@ -43,13 +64,28 @@
             <a-menu-item key="61">成功</a-menu-item>
             <a-menu-item key="62">失败</a-menu-item>
         </a-sub-menu>
+        -->
     </a-menu>
 </template>
 
 <script>
-  export default {
-    name: "Navmenu"
+import SubMenu from './SubMenu'
+import { asyncRouterMap } from '../router/'
+
+export default {
+  name: "Navmenu",
+  components: {
+      "s-submenu": SubMenu
+  },
+  data() {
+    return {
+      menus: []
+    }
+  },
+  created() {
+    this.menus = asyncRouterMap
   }
+}
 </script>
 
 <style scoped>

src/components/SubMenu.vue

+<template>
+    <a-menu-item :key="menu.id" :name="menu.id" v-if="!menu.children && router.matcher.match({ name: menu.permission }).matched.length">
+        <router-link :to="{ name: menu.permission, params: { pageNo: '1' } }">
+            <a-icon v-if="menu.icon" :type="menu.icon"></a-icon>
+            <span>{{ menu.name }}</span>
+        </router-link>
+    </a-menu-item>
+    <a-submenu :key="menu.id" :name="menu.id" v-else>
+        <span slot="title"><a-icon :type="menu.icon" v-if="menu.icon" /><span>{{ menu.name }}</span></span>
+        <template v-for="(submenu, index) in menu.children">
+            <s-submenu :key="submenu.id" :menu="submenu"></s-submenu>
+        </template>
+    </a-submenu>
+</template>
+
+<script>
+import SubMenu from './SubMenu'
+
+export default {
+    name: "SubMenu",
+  components: {
+      "s-submenu": SubMenu
+  },
+  props: {
+    menu: {},
+    collapsed: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
\ No newline at end of file

src/permission.js

+import Vue from 'vue'
 import router from './router'
 import store from './store'
 
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
+// import { Message } from 'ant-design-vue'
+
+import { getToken } from "./utils/auth"
 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
@@ -10,20 +14,36 @@ const whiteList = ['/login']// no redirect whitelist
 
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar
+
+  if (getToken()) {
+    /* has token */
     if (to.path === '/login') {
       next({ path: '/' })
       NProgress.done()
     } else {
       if (store.getters.roles.length === 0) {
+
+        store.dispatch('GetInfo').then(res => {
           const roles = ['editor', 'develop']
           store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
+
+            console.log( 'dispatch::GenerateRoutes succeeded.' )
+
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
+        }).catch((err) => {
+          store.dispatch('FedLogout').then(() => {
+            console.log(err)
+            Vue.$message.error('This is a message of error');
+          })
+        })
+
       } else {
         next()
       }
     }
+  } else {
 
     if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
       next()
@@ -32,6 +52,8 @@ router.beforeEach((to, from, next) => {
       NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
     }
 
+  }
+
 })
 
 router.afterEach(() => {

src/router/index.js

@@ -18,7 +18,7 @@ Vue.use(Router)
 export const constantRouterMap = [
   {
     path: '/login',
-    component: () => import('../views/About')
+    component: () => import('../views/Login')
   },
   {
     path: '/404',
@@ -45,7 +45,8 @@ export const asyncRouterMap = [
     path: '/dashboard',
     component: Layout,
     name: 'dashboard',
-    meta: { title: 'dashboard' },
+    redirect: '/dashboard/analysis',
+    meta: { title: 'dashboard', icon: 'dashboard' },
     children: [
       {
         path: 'analysis',
@@ -71,7 +72,7 @@ export const asyncRouterMap = [
     path: '/form',
     component: Layout,
     name: 'form',
-    meta: { title: '表单页' },
+    meta: { title: '表单页', icon: 'form' },
     children: [
       {
         path: 'base-form',
@@ -97,21 +98,52 @@ export const asyncRouterMap = [
     path: '/list',
     component: Layout,
     name: 'list',
-    meta: { title: '列表页' },
+    meta: { title: '列表页', icon: 'table' },
     children: [
       {
         path: 'table-list',
         name: 'TableList',
         component: () => import('../views/list/TableList'),
         meta: { title: '查询表格' }
-      }
+      },
+      {
+        path: 'basic-list',
+        name: 'BasicList',
+        component: () => import('../views/list/TableList'),
+        meta: { title: '标准列表' }
+      },
+      {
+        path: 'card-list',
+        name: 'CardList',
+        component: () => import('../views/list/TableList'),
+        meta: { title: '卡片列表' }
+      },
+      {
+        path: 'search',
+        name: 'SearchList',
+        meta: { title: '搜索列表' },
+        children: [
+          {
+            path: 'articles',
+            name: 'Articles',
+            component: () => import('../views/list/TableList'),
+            meta: { title: '搜索列表（文章）' }
+          },
+          {
+            path: 'articles',
+            name: 'Articles',
+            component: () => import('../views/list/TableList'),
+            meta: { title: '搜索列表（文章）' }
+          },
+        ]
+      },
     ]
   },
   {
     path: '/profile',
     component: Layout,
     name: 'profile',
-    meta: { title: '详情页' },
+    meta: { title: '详情页', icon: 'profile' },
     children: [
       {
         path: 'basic',
@@ -131,7 +163,7 @@ export const asyncRouterMap = [
     path: '/result',
     component: Layout,
     name: 'result',
-    meta: { title: '结果页' },
+    meta: { title: '结果页', icon: 'check-circle-o' },
     children: [
       {
         path: 'success',
@@ -154,7 +186,7 @@ export const asyncRouterMap = [
     path: '/exception',
     component: Layout,
     name: 'exception',
-    meta: { title: '异常页' },
+    meta: { title: '异常页', icon: 'warning' },
     children: [
       {
         path: '403',

src/store/modules/permission.js

@@ -22,7 +22,8 @@ function hasRole(roles, route) {
 
 function filterAsyncRouter(asyncRouterMap, roles) {
   console.log(asyncRouterMap, roles)
-
+  return asyncRouterMap
+/*
   const accessedRouters = asyncRouterMap.filter(route => {
     if (hasPermission(roles.permissionList, route)) {
       if (route.children && route.children.length) {
@@ -33,6 +34,7 @@ function filterAsyncRouter(asyncRouterMap, roles) {
     return false
   })
   return accessedRouters
+  */
 }
 
 const permission = {

src/store/modules/user.js

+import { login, getInfo, logout } from "@/api/login";
 
 const user = {
   state: {
@@ -73,7 +74,7 @@ const user = {
     },
 
     // 登出
-    LogOut({ commit, state }) {
+    Logout({ commit, state }) {
       return new Promise((resolve, reject) => {
         logout(state.token).then(() => {
           commit('SET_TOKEN', '')
@@ -87,7 +88,7 @@ const user = {
     },
 
     // 前端 登出
-    FedLogOut({ commit }) {
+    FedLogout({ commit }) {
       return new Promise(resolve => {
         commit('SET_TOKEN', '')
         // removeToken()

src/utils/auth.js

+import Cookies from 'js-cookie'
+
+const TokenKey = 'Access-Token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
\ No newline at end of file

src/utils/request.js

@@ -4,7 +4,7 @@ import { VueAxios } from './axios'
 
 // 创建 axios 实例
 const service = axios.create({
-    baseURL: process.env.BASE_API, // api base_url
+    baseURL: '/api', // api base_url
     timeout: 5000 // 请求超时时间
 })
 

src/views/About.vue → src/views/Login.vue

 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div class="login">
+    <h1>This is an login page</h1>
   </div>
 </template>

vue.config.js

+// vue.config.js
+module.exports = {
+  pages: {
+    index: {
+      entry: 'src/main.js',
+      chunks: ['chunk-vendors', 'chunk-common', 'index']
+    }
+  },
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
+        ws: true,
+        changeOrigin: true
+      },
+      '/gateway': {
+        target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/gateway': '/api'
+        }
+      }
+    }
+  }
+}
\ No newline at end of file