feat: integrate admin template with backend auth

.env.development

@@ -2,4 +2,4 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = 'http://localhost:18080/api'

.env.production

@@ -2,5 +2,4 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = 'http://localhost:18080/api'
-

.env.staging

@@ -4,5 +4,4 @@ NODE_ENV = production
 ENV = 'staging'
 
 # base api
-VUE_APP_BASE_API = '/stage-api'
+VUE_APP_BASE_API = 'http://localhost:18080/api'
-

src/api/user.js

@@ -2,23 +2,15 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    url: '/vue-element-admin/user/login',
+    url: '/admin/auth/login',
     method: 'post',
     data
   })
 }
 
-export function getInfo(token) {
+export function getMenu() {
   return request({
-    url: '/vue-element-admin/user/info',
+    url: '/admin/auth/menu',
-    method: 'get',
+    method: 'get'
-    params: { token }
-  })
-}
-
-export function logout() {
-  return request({
-    url: '/vue-element-admin/user/logout',
-    method: 'post'
   })
 }

src/layout/components/Navbar.vue

@@ -21,23 +21,15 @@
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <span class="user-name">{{ name }}</span>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <router-link to="/profile/index">
+          <router-link to="/dashboard">
-            <el-dropdown-item>Profile</el-dropdown-item>
+            <el-dropdown-item>后台首页</el-dropdown-item>
           </router-link>
-          <router-link to="/">
-            <el-dropdown-item>Dashboard</el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display:block;">退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -67,7 +59,8 @@ export default {
     ...mapGetters([
       'sidebar',
       'avatar',
-      'device'
+      'device',
+      'name'
     ])
   },
   methods: {
@@ -153,10 +146,16 @@ export default {
           border-radius: 10px;
         }
 
+        .user-name {
+          margin-left: 8px;
+          font-size: 14px;
+          color: #303133;
+        }
+
         .el-icon-caret-bottom {
           cursor: pointer;
-          position: absolute;
+          position: static;
-          right: -20px;
+          margin-left: 6px;
           top: 25px;
           font-size: 12px;
         }

src/layout/components/ParentView.vue

@@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'ParentView'
+}
+</script>

src/main.js

@@ -20,19 +20,6 @@ import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
 
-/**
- * If you don't want to use mock-server
- * you want to use MockJs for mock api
- * you can execute: mockXHR()
- *
- * Currently MockJs will be used in the production environment,
- * please remove it before going online ! ! !
- */
-if (process.env.NODE_ENV === 'production') {
-  const { mockXHR } = require('../mock')
-  mockXHR()
-}
-
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
   locale: enLang // 如果使用中文，无需设置，请删除

src/permission.js

@@ -32,12 +32,10 @@ router.beforeEach(async(to, from, next) => {
         next()
       } else {
         try {
-          // get user info
+          const userInfo = await store.dispatch('user/getInfo')
-          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-          const { roles } = await store.dispatch('user/getInfo')
 
-          // generate accessible routes map based on roles
+          // generate accessible routes map based on backend menus
-          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+          const accessRoutes = await store.dispatch('permission/generateRoutes', userInfo.menus)
 
           // dynamically add accessible routes
           router.addRoutes(accessRoutes)

src/router/index.js

@@ -1,44 +1,12 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import Layout from '@/layout'
+import { rootRedirectRoute } from './root-route'
 
 Vue.use(Router)
 
-/* Layout */
-import Layout from '@/layout'
-
-/* Router Modules */
-import componentsRouter from './modules/components'
-import chartsRouter from './modules/charts'
-import tableRouter from './modules/table'
-import nestedRouter from './modules/nested'
-
-/**
- * Note: sub-menu only appear when route children.length >= 1
- * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
- *
- * hidden: true                   if set true, item will not show in the sidebar(default is false)
- * alwaysShow: true               if set true, will always show the root menu
- *                                if not set alwaysShow, when item has more than one children route,
- *                                it will becomes nested mode, otherwise not show the root menu
- * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
- * name:'router-name'             the name is used by <keep-alive> (must set!!!)
- * meta : {
-    roles: ['admin','editor']    control the page roles (you can set multiple roles)
-    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
-    noCache: true                if set true, the page will no be cached(default is false)
-    affix: true                  if set true, the tag will affix in the tags-view
-    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
-    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
-  }
- */
-
-/**
- * constantRoutes
- * a base page that does not have permission requirements
- * all roles can be accessed
- */
 export const constantRoutes = [
+  rootRedirectRoute,
   {
     path: '/redirect',
     component: Layout,
@@ -69,336 +37,19 @@ export const constantRoutes = [
     path: '/401',
     component: () => import('@/views/error-page/401'),
     hidden: true
-  },
-  {
-    path: '/',
-    component: Layout,
-    redirect: '/dashboard',
-    children: [
-      {
-        path: 'dashboard',
-        component: () => import('@/views/dashboard/index'),
-        name: 'Dashboard',
-        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
   }
-    ]
-  },
-  {
-    path: '/documentation',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
-        meta: { title: 'Documentation', icon: 'documentation', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/guide',
-    component: Layout,
-    redirect: '/guide/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/guide/index'),
-        name: 'Guide',
-        meta: { title: 'Guide', icon: 'guide', noCache: true }
-      }
-    ]
-  },
-  {
-    path: '/profile',
-    component: Layout,
-    redirect: '/profile/index',
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/profile/index'),
-        name: 'Profile',
-        meta: { title: 'Profile', icon: 'user', noCache: true }
-      }
-    ]
-  }
-]
-
-/**
- * asyncRoutes
- * the routes that need to be dynamically loaded based on user roles
- */
-export const asyncRoutes = [
-  {
-    path: '/permission',
-    component: Layout,
-    redirect: '/permission/page',
-    alwaysShow: true, // will always show the root menu
-    name: 'Permission',
-    meta: {
-      title: 'Permission',
-      icon: 'lock',
-      roles: ['admin', 'editor'] // you can set roles in root nav
-    },
-    children: [
-      {
-        path: 'page',
-        component: () => import('@/views/permission/page'),
-        name: 'PagePermission',
-        meta: {
-          title: 'Page Permission',
-          roles: ['admin'] // or you can only set roles in sub nav
-        }
-      },
-      {
-        path: 'directive',
-        component: () => import('@/views/permission/directive'),
-        name: 'DirectivePermission',
-        meta: {
-          title: 'Directive Permission'
-          // if do not set roles, means: this page does not require permission
-        }
-      },
-      {
-        path: 'role',
-        component: () => import('@/views/permission/role'),
-        name: 'RolePermission',
-        meta: {
-          title: 'Role Permission',
-          roles: ['admin']
-        }
-      }
-    ]
-  },
-
-  {
-    path: '/icon',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/icons/index'),
-        name: 'Icons',
-        meta: { title: 'Icons', icon: 'icon', noCache: true }
-      }
-    ]
-  },
-
-  /** when your routing map is too long, you can split it into small modules **/
-  componentsRouter,
-  chartsRouter,
-  nestedRouter,
-  tableRouter,
-
-  {
-    path: '/example',
-    component: Layout,
-    redirect: '/example/list',
-    name: 'Example',
-    meta: {
-      title: 'Example',
-      icon: 'el-icon-s-help'
-    },
-    children: [
-      {
-        path: 'create',
-        component: () => import('@/views/example/create'),
-        name: 'CreateArticle',
-        meta: { title: 'Create Article', icon: 'edit' }
-      },
-      {
-        path: 'edit/:id(\\d+)',
-        component: () => import('@/views/example/edit'),
-        name: 'EditArticle',
-        meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
-        hidden: true
-      },
-      {
-        path: 'list',
-        component: () => import('@/views/example/list'),
-        name: 'ArticleList',
-        meta: { title: 'Article List', icon: 'list' }
-      }
-    ]
-  },
-
-  {
-    path: '/tab',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/tab/index'),
-        name: 'Tab',
-        meta: { title: 'Tab', icon: 'tab' }
-      }
-    ]
-  },
-
-  {
-    path: '/error',
-    component: Layout,
-    redirect: 'noRedirect',
-    name: 'ErrorPages',
-    meta: {
-      title: 'Error Pages',
-      icon: '404'
-    },
-    children: [
-      {
-        path: '401',
-        component: () => import('@/views/error-page/401'),
-        name: 'Page401',
-        meta: { title: '401', noCache: true }
-      },
-      {
-        path: '404',
-        component: () => import('@/views/error-page/404'),
-        name: 'Page404',
-        meta: { title: '404', noCache: true }
-      }
-    ]
-  },
-
-  {
-    path: '/error-log',
-    component: Layout,
-    children: [
-      {
-        path: 'log',
-        component: () => import('@/views/error-log/index'),
-        name: 'ErrorLog',
-        meta: { title: 'Error Log', icon: 'bug' }
-      }
-    ]
-  },
-
-  {
-    path: '/excel',
-    component: Layout,
-    redirect: '/excel/export-excel',
-    name: 'Excel',
-    meta: {
-      title: 'Excel',
-      icon: 'excel'
-    },
-    children: [
-      {
-        path: 'export-excel',
-        component: () => import('@/views/excel/export-excel'),
-        name: 'ExportExcel',
-        meta: { title: 'Export Excel' }
-      },
-      {
-        path: 'export-selected-excel',
-        component: () => import('@/views/excel/select-excel'),
-        name: 'SelectExcel',
-        meta: { title: 'Export Selected' }
-      },
-      {
-        path: 'export-merge-header',
-        component: () => import('@/views/excel/merge-header'),
-        name: 'MergeHeader',
-        meta: { title: 'Merge Header' }
-      },
-      {
-        path: 'upload-excel',
-        component: () => import('@/views/excel/upload-excel'),
-        name: 'UploadExcel',
-        meta: { title: 'Upload Excel' }
-      }
-    ]
-  },
-
-  {
-    path: '/zip',
-    component: Layout,
-    redirect: '/zip/download',
-    alwaysShow: true,
-    name: 'Zip',
-    meta: { title: 'Zip', icon: 'zip' },
-    children: [
-      {
-        path: 'download',
-        component: () => import('@/views/zip/index'),
-        name: 'ExportZip',
-        meta: { title: 'Export Zip' }
-      }
-    ]
-  },
-
-  {
-    path: '/pdf',
-    component: Layout,
-    redirect: '/pdf/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/pdf/index'),
-        name: 'PDF',
-        meta: { title: 'PDF', icon: 'pdf' }
-      }
-    ]
-  },
-  {
-    path: '/pdf/download',
-    component: () => import('@/views/pdf/download'),
-    hidden: true
-  },
-
-  {
-    path: '/theme',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/theme/index'),
-        name: 'Theme',
-        meta: { title: 'Theme', icon: 'theme' }
-      }
-    ]
-  },
-
-  {
-    path: '/clipboard',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/clipboard/index'),
-        name: 'ClipboardDemo',
-        meta: { title: 'Clipboard', icon: 'clipboard' }
-      }
-    ]
-  },
-
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'External Link', icon: 'link' }
-      }
-    ]
-  },
-
-  // 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 }),
   routes: constantRoutes
 })
 
 const router = createRouter()
 
-// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
   const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
+  router.matcher = newRouter.matcher
 }
 
 export default router

src/router/root-route.js

@@ -0,0 +1,5 @@
+export const rootRedirectRoute = {
+  path: '/',
+  redirect: '/dashboard',
+  hidden: true
+}

src/settings.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'Vue Element Admin',
+  title: '竞赛管理后台',
 
   /**
    * @type {boolean} true | false

src/store/modules/permission.js

@@ -1,37 +1,44 @@
-import { asyncRoutes, constantRoutes } from '@/router'
+import Layout from '@/layout'
+import ParentView from '@/layout/components/ParentView'
+import { constantRoutes } from '@/router'
+import { buildBackendRouteTree } from '@/utils/backend-menu'
 
-/**
+const viewLoaders = {
- * Use meta.role to determine if the current user has permission
+  'views/dashboard/index': () => import('@/views/dashboard/index')
- * @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
-  }
 }
 
-/**
+function resolveView(componentKey) {
- * Filter asynchronous routing tables by recursion
+  if (componentKey === 'Layout') {
- * @param routes asyncRoutes
+    return Layout
- * @param roles
+  }
- */
+  if (componentKey === 'ParentView') {
-export function filterAsyncRoutes(routes, roles) {
+    return ParentView
-  const res = []
+  }
+  return viewLoaders[componentKey] || (() => import('@/views/backend-page/index'))
+}
 
-  routes.forEach(route => {
+function hydrateRoutes(routes) {
-    const tmp = { ...route }
+  return routes.map(route => {
-    if (hasPermission(roles, tmp)) {
+    const record = {
-      if (tmp.children) {
+      ...route,
-        tmp.children = filterAsyncRoutes(tmp.children, roles)
+      component: resolveView(route.componentKey)
     }
-      res.push(tmp)
+
+    if (record.meta) {
+      record.meta = {
+        ...record.meta,
+        componentKey: route.componentKey
       }
+    }
+
+    delete record.componentKey
+
+    if (record.children && record.children.length) {
+      record.children = hydrateRoutes(record.children)
+    }
+
+    return record
   })
-
-  return res
 }
 
 const state = {
@@ -47,14 +54,11 @@ const mutations = {
 }
 
 const actions = {
-  generateRoutes({ commit }, roles) {
+  generateRoutes({ commit }, menus) {
     return new Promise(resolve => {
-      let accessedRoutes
+      const accessedRoutes = hydrateRoutes(buildBackendRouteTree(menus)).concat([
-      if (roles.includes('admin')) {
+        { path: '*', redirect: '/404', hidden: true }
-        accessedRoutes = asyncRoutes || []
+      ])
-      } else {
-        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-      }
       commit('SET_ROUTES', accessedRoutes)
       resolve(accessedRoutes)
     })

src/store/modules/user.js

@@ -1,6 +1,7 @@
-import { login, logout, getInfo } from '@/api/user'
+import { login, getMenu } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
-import router, { resetRouter } from '@/router'
+import { resetRouter } from '@/router'
+import { buildUserProfileFromToken } from '@/utils/admin-auth'
 
 const state = {
   token: getToken(),
@@ -47,25 +48,22 @@ const actions = {
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
+      getMenu().then(response => {
-        const { data } = response
+        const profile = buildUserProfileFromToken(state.token)
+        const menus = Array.isArray(response.data) ? response.data : []
 
-        if (!data) {
+        if (!profile.roles || profile.roles.length <= 0) {
           reject('Verification failed, please Login again.')
         }
 
-        const { roles, name, avatar, introduction } = data
+        commit('SET_ROLES', profile.roles)
-
+        commit('SET_NAME', profile.name)
-        // roles must be a non-empty array
+        commit('SET_AVATAR', profile.avatar)
-        if (!roles || roles.length <= 0) {
+        commit('SET_INTRODUCTION', profile.introduction)
-          reject('getInfo: roles must be a non-null array!')
+        resolve({
-        }
+          ...profile,
-
+          menus
-        commit('SET_ROLES', roles)
+        })
-        commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
-        commit('SET_INTRODUCTION', introduction)
-        resolve(data)
       }).catch(error => {
         reject(error)
       })
@@ -73,22 +71,17 @@ const actions = {
   },
 
   // user logout
-  logout({ commit, state, dispatch }) {
+  logout({ commit, dispatch }) {
-    return new Promise((resolve, reject) => {
+    return new Promise(resolve => {
-      logout(state.token).then(() => {
       commit('SET_TOKEN', '')
       commit('SET_ROLES', [])
+      commit('SET_NAME', '')
+      commit('SET_AVATAR', '')
+      commit('SET_INTRODUCTION', '')
       removeToken()
       resetRouter()
-
-        // reset visited views and cached views
-        // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
       dispatch('tagsView/delAllViews', null, { root: true })
-
       resolve()
-      }).catch(error => {
-        reject(error)
-      })
     })
   },
 
@@ -97,29 +90,12 @@ const actions = {
     return new Promise(resolve => {
       commit('SET_TOKEN', '')
       commit('SET_ROLES', [])
+      commit('SET_NAME', '')
+      commit('SET_AVATAR', '')
+      commit('SET_INTRODUCTION', '')
       removeToken()
       resolve()
     })
-  },
-
-  // dynamically modify permissions
-  async changeRoles({ commit, dispatch }, role) {
-    const token = role + '-token'
-
-    commit('SET_TOKEN', token)
-    setToken(token)
-
-    const { roles } = await dispatch('getInfo')
-
-    resetRouter()
-
-    // generate accessible routes map based on roles
-    const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
-    // dynamically add accessible routes
-    router.addRoutes(accessRoutes)
-
-    // reset visited views and cached views
-    dispatch('tagsView/delAllViews', null, { root: true })
   }
 }
 

src/utils/admin-auth.js

@@ -0,0 +1,37 @@
+const DEFAULT_AVATAR = 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
+
+export function parseJwtPayload(token) {
+  if (!token || typeof token !== 'string') {
+    return null
+  }
+
+  const parts = token.split('.')
+  if (parts.length < 2) {
+    return null
+  }
+
+  try {
+    const payload = parts[1]
+      .replace(/-/g, '+')
+      .replace(/_/g, '/')
+      .padEnd(Math.ceil(parts[1].length / 4) * 4, '=')
+
+    return JSON.parse(window.atob(payload))
+  } catch (error) {
+    return null
+  }
+}
+
+export function buildUserProfileFromToken(token) {
+  const payload = parseJwtPayload(token) || {}
+  const roleCode = payload.roleCode || ''
+
+  return {
+    name: payload.username || '',
+    avatar: DEFAULT_AVATAR,
+    introduction: payload.roleName || '',
+    roles: roleCode ? [roleCode] : [],
+    roleCode,
+    roleName: payload.roleName || ''
+  }
+}

src/utils/auth.js

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'Admin-Token'
+const TokenKey = 'admin_token'
 
 export function getToken() {
   return Cookies.get(TokenKey)

src/utils/backend-menu.js

@@ -0,0 +1,83 @@
+function trimSlashes(value) {
+  return String(value || '').replace(/^\/+|\/+$/g, '')
+}
+
+function ensureAbsolutePath(value) {
+  const normalized = trimSlashes(value)
+  return normalized ? `/${normalized}` : '/'
+}
+
+function relativePath(fullPath, parentPath) {
+  const full = ensureAbsolutePath(fullPath)
+  const parent = ensureAbsolutePath(parentPath)
+
+  if (full === parent) {
+    return ''
+  }
+
+  if (full.startsWith(`${parent}/`)) {
+    return trimSlashes(full.slice(parent.length))
+  }
+
+  return trimSlashes(full.split('/').pop())
+}
+
+function buildRouteName(menu, suffix = '') {
+  const base = trimSlashes(menu.routePath).replace(/[^\w]+/g, '_') || `menu_${menu.id}`
+  return `${base}${suffix}_${menu.id}`
+}
+
+function buildMeta(menu) {
+  return {
+    title: menu.menuName || 'Untitled',
+    icon: menu.icon || 'menu'
+  }
+}
+
+function buildLeafRoute(menu, parentPath, useIndexPath = false) {
+  return {
+    path: useIndexPath ? '' : relativePath(menu.routePath, parentPath),
+    componentKey: menu.component || 'backend-placeholder',
+    name: buildRouteName(menu, '_view'),
+    meta: buildMeta(menu)
+  }
+}
+
+function buildChildRoute(menu, parentPath) {
+  const children = Array.isArray(menu.children) ? menu.children : []
+
+  if (!children.length) {
+    return buildLeafRoute(menu, parentPath, false)
+  }
+
+  return {
+    path: relativePath(menu.routePath, parentPath),
+    componentKey: 'ParentView',
+    name: buildRouteName(menu, '_group'),
+    redirect: ensureAbsolutePath(children[0].routePath),
+    meta: buildMeta(menu),
+    alwaysShow: true,
+    children: children.map(child => buildChildRoute(child, menu.routePath))
+  }
+}
+
+function buildRootRoute(menu) {
+  const rootPath = ensureAbsolutePath(menu.routePath)
+  const children = Array.isArray(menu.children) ? menu.children : []
+
+  return {
+    path: rootPath,
+    componentKey: 'Layout',
+    name: buildRouteName(menu, '_root'),
+    redirect: children.length ? ensureAbsolutePath(children[0].routePath) : rootPath,
+    meta: buildMeta(menu),
+    alwaysShow: children.length > 0,
+    children: children.length
+      ? children.map(child => buildChildRoute(child, menu.routePath))
+      : [buildLeafRoute(menu, menu.routePath, true)]
+  }
+}
+
+export function buildBackendRouteTree(menus) {
+  return (Array.isArray(menus) ? menus : []).map(buildRootRoute)
+}

src/utils/request.js

@@ -7,19 +7,15 @@ import { getToken } from '@/utils/auth'
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
+  timeout: 15000 // request timeout
 })
 
 // request interceptor
 service.interceptors.request.use(
   config => {
-    // do something before request is sent
+    const token = store.getters.token || getToken()
-
+    if (token) {
-    if (store.getters.token) {
+      config.headers.Authorization = `Bearer ${token}`
-      // let each request carry token
-      // ['X-Token'] is a custom headers key
-      // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
     }
     return config
   },
@@ -45,7 +41,18 @@ service.interceptors.response.use(
   response => {
     const res = response.data
 
-    // if the custom code is not 20000, it is judged as an error.
+    if (typeof res.success === 'boolean') {
+      if (!res.success) {
+        Message({
+          message: res.message || 'Error',
+          type: 'error',
+          duration: 5 * 1000
+        })
+        return Promise.reject(new Error(res.message || 'Error'))
+      }
+      return res
+    }
+
     if (res.code !== 20000) {
       Message({
         message: res.message || 'Error',
@@ -72,9 +79,22 @@ service.interceptors.response.use(
     }
   },
   error => {
-    console.log('err' + error) // for debug
+    const status = error.response && error.response.status
+
+    if (status === 401) {
+      MessageBox.confirm('登录状态已失效，可以取消停留在当前页，或重新登录', '登录失效', {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        store.dispatch('user/resetToken').then(() => {
+          location.reload()
+        })
+      }).catch(() => {})
+    }
+
     Message({
-      message: error.message,
+      message: (error.response && error.response.data && error.response.data.message) || error.message,
       type: 'error',
       duration: 5 * 1000
     })

src/views/backend-page/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="app-container">
+    <el-card shadow="never">
+      <div slot="header">
+        <span>{{ title }}</span>
+      </div>
+      <p>当前菜单已接入现有后端动态菜单。</p>
+      <p>路由：{{ $route.path }}</p>
+      <p>组件映射：{{ componentKey }}</p>
+      <p>该页面可继续替换为对应业务页面实现。</p>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BackendPage',
+  computed: {
+    title() {
+      return this.$route.meta && this.$route.meta.title ? this.$route.meta.title : '管理后台'
+    },
+    componentKey() {
+      return this.$route.meta && this.$route.meta.componentKey ? this.$route.meta.componentKey : 'backend-placeholder'
+    }
+  }
+}
+</script>

src/views/dashboard/admin/index.vue

@@ -1,124 +1,160 @@
 <template>
-  <div class="dashboard-editor-container">
+  <div class="dashboard-home">
-    <github-corner class="github-corner" />
+    <el-row :gutter="24">
-
+      <el-col :xs="24" :md="16">
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+        <el-card shadow="never" class="hero-card">
-
+          <div class="eyebrow">ADMIN HOME</div>
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+          <h2>竞赛管理后台已接入现有认证与菜单系统</h2>
-      <line-chart :chart-data="lineChartData" />
+          <p>
-    </el-row>
+            当前登录账号为 <strong>{{ name }}</strong>，角色为 <strong>{{ roleLabel }}</strong>。
-
+            登录后使用后端返回的 JWT 完成鉴权，并根据 `/api/admin/auth/menu` 动态生成左侧导航。
-    <el-row :gutter="32">
+          </p>
-      <el-col :xs="24" :sm="24" :lg="8">
+          <div class="endpoint-list">
-        <div class="chart-wrapper">
+            <span>登录接口：`/api/admin/auth/login`</span>
-          <raddar-chart />
+            <span>菜单接口：`/api/admin/auth/menu`</span>
           </div>
+        </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :xs="24" :md="8">
-        <div class="chart-wrapper">
+        <el-card shadow="hover" class="summary-card">
-          <pie-chart />
+          <div class="summary-label">已加载菜单</div>
-        </div>
+          <div class="summary-value">{{ menuItems.length }}</div>
-      </el-col>
+          <div class="summary-hint">来自后端动态菜单，不再依赖 mock 数据。</div>
-      <el-col :xs="24" :sm="24" :lg="8">
+        </el-card>
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
       </el-col>
     </el-row>
 
-    <el-row :gutter="8">
+    <el-card shadow="never" class="menu-card">
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
+      <div slot="header" class="clearfix">
-        <transaction-table />
+        <span>当前可访问菜单</span>
-      </el-col>
+      </div>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
+      <el-row :gutter="16">
-        <todo-list />
+        <el-col v-for="item in menuItems" :key="item.path" :xs="24" :sm="12" :lg="8">
-      </el-col>
+          <div class="menu-item">
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
+            <div class="menu-title">{{ item.title }}</div>
-        <box-card />
+            <div class="menu-path">{{ item.path }}</div>
+          </div>
         </el-col>
       </el-row>
+    </el-card>
   </div>
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
 export default {
   name: 'DashboardAdmin',
-  components: {
+  computed: {
-    GithubCorner,
+    name() {
-    PanelGroup,
+      return this.$store.getters.name || '管理员'
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-    TransactionTable,
-    TodoList,
-    BoxCard
     },
-  data() {
+    roleLabel() {
-    return {
+      const roles = this.$store.getters.roles || []
-      lineChartData: lineChartData.newVisitis
+      return roles.join(', ') || 'ADMIN'
-    }
     },
-  methods: {
+    menuItems() {
-    handleSetLineChartData(type) {
+      return (this.$store.getters.permission_routes || [])
-      this.lineChartData = lineChartData[type]
+        .filter(route => route.path && !route.hidden && route.path !== '*')
+        .map(route => ({
+          path: route.path,
+          title: route.meta && route.meta.title ? route.meta.title : route.name || route.path
+        }))
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.dashboard-editor-container {
+.dashboard-home {
-  padding: 32px;
+  padding: 24px;
-  background-color: rgb(240, 242, 245);
+  background: #f5f7fa;
-  position: relative;
+  min-height: calc(100vh - 84px);
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
 }
 
-@media (max-width:1024px) {
+.hero-card,
-  .chart-wrapper {
+.summary-card,
-    padding: 8px;
+.menu-card {
-  }
+  border-radius: 12px;
+}
+
+.hero-card {
+  min-height: 220px;
+}
+
+.eyebrow {
+  color: #409eff;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  margin-bottom: 12px;
+}
+
+h2 {
+  margin: 0 0 16px;
+  color: #1f2d3d;
+  font-size: 28px;
+}
+
+p {
+  margin: 0;
+  color: #4a5568;
+  line-height: 1.7;
+}
+
+.endpoint-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 20px;
+  color: #606266;
+  font-size: 13px;
+}
+
+.summary-card {
+  min-height: 220px;
+  display: flex;
+  align-items: center;
+}
+
+.summary-label {
+  color: #909399;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.summary-value {
+  color: #303133;
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.summary-hint {
+  margin-top: 12px;
+  color: #606266;
+  line-height: 1.6;
+}
+
+.menu-card {
+  margin-top: 24px;
+}
+
+.menu-item {
+  margin-bottom: 16px;
+  padding: 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 10px;
+  background: #fff;
+}
+
+.menu-title {
+  color: #303133;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.menu-path {
+  margin-top: 8px;
+  color: #909399;
+  font-size: 13px;
 }
 </style>

src/views/dashboard/index.vue

@@ -5,27 +5,15 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import adminDashboard from './admin'
-import editorDashboard from './editor'
 
 export default {
   name: 'Dashboard',
-  components: { adminDashboard, editorDashboard },
+  components: { adminDashboard },
   data() {
     return {
       currentRole: 'adminDashboard'
     }
-  },
-  computed: {
-    ...mapGetters([
-      'roles'
-    ])
-  },
-  created() {
-    if (!this.roles.includes('admin')) {
-      this.currentRole = 'editorDashboard'
-    }
   }
 }
 </script>

src/views/login/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="login-container">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
-
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">竞赛管理后台</h3>
+        <p class="subtitle">vue-element-admin 已接入现有管理端认证与动态菜单</p>
       </div>
 
       <el-form-item prop="username">
@@ -13,7 +13,7 @@
         <el-input
           ref="username"
           v-model="loginForm.username"
-          placeholder="Username"
+          placeholder="管理员账号"
           name="username"
           type="text"
           tabindex="1"
@@ -31,7 +31,7 @@
             ref="password"
             v-model="loginForm.password"
             :type="passwordType"
-            placeholder="Password"
+            placeholder="管理员密码"
             name="password"
             tabindex="2"
             autocomplete="on"
@@ -45,60 +45,33 @@
         </el-form-item>
       </el-tooltip>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:16px;" @click.native.prevent="handleLogin">登 录</el-button>
-
-      <div style="position:relative">
-        <div class="tips">
-          <span>Username : admin</span>
-          <span>Password : any</span>
-        </div>
-        <div class="tips">
-          <span style="margin-right:18px;">Username : editor</span>
-          <span>Password : any</span>
-        </div>
-
-        <el-button class="thirdparty-button" type="primary" @click="showDialog=true">
-          Or connect with
-        </el-button>
-      </div>
     </el-form>
-
-    <el-dialog title="Or connect with" :visible.sync="showDialog">
-      Can not be simulated on local, so please combine you own business simulation! ! !
-      <br>
-      <br>
-      <br>
-      <social-sign />
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
-import SocialSign from './components/SocialSignin'
-
 export default {
   name: 'Login',
-  components: { SocialSign },
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
+      if (!value || !value.trim()) {
-        callback(new Error('Please enter the correct user name'))
+        callback(new Error('请输入管理员账号'))
       } else {
         callback()
       }
     }
     const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
+      if (!value || value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+        callback(new Error('密码至少 6 位'))
       } else {
         callback()
       }
     }
     return {
       loginForm: {
-        username: 'admin',
+        username: '',
-        password: '111111'
+        password: ''
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
@@ -107,14 +80,13 @@ export default {
       passwordType: 'password',
       capsTooltip: false,
       loading: false,
-      showDialog: false,
       redirect: undefined,
       otherQuery: {}
     }
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler(route) {
         const query = route.query
         if (query) {
           this.redirect = query.redirect
@@ -124,50 +96,34 @@ export default {
       immediate: true
     }
   },
-  created() {
-    // window.addEventListener('storage', this.afterQRScan)
-  },
   mounted() {
-    if (this.loginForm.username === '') {
     this.$refs.username.focus()
-    } else if (this.loginForm.password === '') {
-      this.$refs.password.focus()
-    }
-  },
-  destroyed() {
-    // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
     checkCapslock(e) {
       const { key } = e
-      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
+      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
     },
     showPwd() {
-      if (this.passwordType === 'password') {
+      this.passwordType = this.passwordType === 'password' ? '' : 'password'
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
       this.$nextTick(() => {
         this.$refs.password.focus()
       })
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
-        if (valid) {
+        if (!valid) {
+          return false
+        }
+
         this.loading = true
         this.$store.dispatch('user/login', this.loginForm)
           .then(() => {
-              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+            this.$router.push({ path: this.redirect || '/dashboard', query: this.otherQuery })
+          })
+          .finally(() => {
             this.loading = false
           })
-            .catch(() => {
-              this.loading = false
-            })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
       })
     },
     getOtherQuery(query) {
@@ -178,32 +134,11 @@ export default {
         return acc
       }, {})
     }
-    // afterQRScan() {
-    //   if (e.key === 'x-admin-oauth-code') {
-    //     const code = getQueryObject(e.newValue)
-    //     const codeMap = {
-    //       wechat: 'code',
-    //       tencent: 'code'
-    //     }
-    //     const type = codeMap[this.auth_type]
-    //     const codeName = code[type]
-    //     if (codeName) {
-    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
-    //         this.$router.push({ path: this.redirect || '/' })
-    //       })
-    //     } else {
-    //       alert('第三方登录失败')
-    //     }
-    //   }
-    // }
   }
 }
 </script>
 
 <style lang="scss">
-/* 修复input 背景不协调 和光标变色 */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
 $bg:#283443;
 $light_gray:#fff;
 $cursor: #fff;
@@ -214,7 +149,6 @@ $cursor: #fff;
   }
 }
 
-/* reset element-ui css */
 .login-container {
   .el-input {
     display: inline-block;
@@ -267,15 +201,22 @@ $light_gray:#eee;
     overflow: hidden;
   }
 
-  .tips {
+  .title-container {
-    font-size: 14px;
+    position: relative;
-    color: #fff;
-    margin-bottom: 10px;
 
-    span {
+    .title {
-      &:first-of-type {
+      font-size: 28px;
-        margin-right: 16px;
+      color: $light_gray;
+      margin: 0 auto 40px auto;
+      text-align: center;
+      font-weight: bold;
     }
+
+    .subtitle {
+      margin: -24px 0 24px;
+      text-align: center;
+      color: rgba(238, 238, 238, 0.75);
+      font-size: 13px;
     }
   }
 
@@ -287,18 +228,6 @@ $light_gray:#eee;
     display: inline-block;
   }
 
-  .title-container {
-    position: relative;
-
-    .title {
-      font-size: 26px;
-      color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
-      font-weight: bold;
-    }
-  }
-
   .show-pwd {
     position: absolute;
     right: 10px;
@@ -308,17 +237,5 @@ $light_gray:#eee;
     cursor: pointer;
     user-select: none;
   }
-
-  .thirdparty-button {
-    position: absolute;
-    right: 0;
-    bottom: 6px;
-  }
-
-  @media only screen and (max-width: 470px) {
-    .thirdparty-button {
-      display: none;
-    }
-  }
 }
 </style>

tests/unit/router.spec.js

@@ -0,0 +1,9 @@
+import { rootRedirectRoute } from '@/router/root-route'
+
+describe('router constants', () => {
+  it('redirects the root path to dashboard', () => {
+    expect(rootRedirectRoute.path).toBe('/')
+    expect(rootRedirectRoute.redirect).toBe('/dashboard')
+    expect(rootRedirectRoute.hidden).toBe(true)
+  })
+})

tests/unit/utils/admin-auth.spec.js

@@ -0,0 +1,38 @@
+import { buildUserProfileFromToken, parseJwtPayload } from '@/utils/admin-auth'
+
+function createJwt(payload) {
+  const encode = obj => Buffer.from(JSON.stringify(obj)).toString('base64url')
+  return `${encode({ alg: 'HS256', typ: 'JWT' })}.${encode(payload)}.signature`
+}
+
+describe('admin auth utils', () => {
+  it('parses jwt payload from backend admin token', () => {
+    const token = createJwt({
+      username: 'admin_user',
+      roleCode: 'SUPER_ADMIN',
+      roleName: 'Super Admin'
+    })
+
+    expect(parseJwtPayload(token)).toEqual({
+      username: 'admin_user',
+      roleCode: 'SUPER_ADMIN',
+      roleName: 'Super Admin'
+    })
+  })
+
+  it('builds user profile from backend admin token', () => {
+    const token = createJwt({
+      username: 'admin_user',
+      roleCode: 'SUPER_ADMIN',
+      roleName: 'Super Admin'
+    })
+
+    expect(buildUserProfileFromToken(token)).toMatchObject({
+      name: 'admin_user',
+      introduction: 'Super Admin',
+      roleCode: 'SUPER_ADMIN',
+      roleName: 'Super Admin',
+      roles: ['SUPER_ADMIN']
+    })
+  })
+})

tests/unit/utils/backend-menu.spec.js

@@ -0,0 +1,63 @@
+import { buildBackendRouteTree } from '@/utils/backend-menu'
+
+describe('backend menu utils', () => {
+  it('maps a root backend menu into a layout route with index child', () => {
+    const routes = buildBackendRouteTree([
+      {
+        id: 1,
+        menuName: 'Dashboard',
+        routePath: '/dashboard',
+        component: 'views/dashboard/index',
+        icon: 'dashboard',
+        children: []
+      }
+    ])
+
+    expect(routes).toHaveLength(1)
+    expect(routes[0]).toMatchObject({
+      path: '/dashboard',
+      componentKey: 'Layout',
+      redirect: '/dashboard'
+    })
+    expect(routes[0].children[0]).toMatchObject({
+      path: '',
+      componentKey: 'views/dashboard/index',
+      meta: {
+        title: 'Dashboard',
+        icon: 'dashboard'
+      }
+    })
+  })
+
+  it('maps nested backend menus into relative child routes', () => {
+    const routes = buildBackendRouteTree([
+      {
+        id: 2,
+        menuName: 'Contest',
+        routePath: '/contest',
+        component: 'layout/router-view',
+        icon: 'trophy',
+        children: [
+          {
+            id: 3,
+            menuName: 'List',
+            routePath: '/contest/list',
+            component: 'views/contest/list',
+            icon: 'list',
+            children: []
+          }
+        ]
+      }
+    ])
+
+    expect(routes[0]).toMatchObject({
+      path: '/contest',
+      redirect: '/contest/list',
+      alwaysShow: true
+    })
+    expect(routes[0].children[0]).toMatchObject({
+      path: 'list',
+      componentKey: 'views/contest/list'
+    })
+  })
+})

vue.config.js

@@ -13,7 +13,7 @@ const name = defaultSettings.title || 'vue Element Admin' // page title
 // For example, Mac: sudo npm run
 // You can change the port by the following method:
 // port = 9527 npm run dev OR npm run dev --port = 9527
-const port = process.env.port || process.env.npm_config_port || 9527 // dev port
+const port = process.env.port || process.env.npm_config_port || 9528 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
@@ -35,8 +35,7 @@ module.exports = {
     overlay: {
       warnings: false,
       errors: true
-    },
+    }
-    before: require('./mock/mock-server.js')
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that