Merge 4329dce5587c00a2b6e5e3edd0cfc1954fee7b59 into 17e41ce1fc1537a90a48b0d0f408f49403faf31c

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",    
     "lint": "vue-cli-service lint",
     "predeploy": "yarn build",
     "deploy": "gh-pages -d dist -b pages -r https://gitee.com/iczer/vue-antd-admin.git",

src/components/setting/Setting.vue

@@ -126,6 +126,7 @@ import {setting} from '@/config/default'
 import sysConfig from '@/config/config'
 import fastEqual from 'fast-deep-equal'
 import deepMerge from 'deepmerge'
+import {getLocalStorage, setLocalStorage, removeLocalStorage} from '@/utils/cache'
 
 const ColorCheckboxGroup = ColorCheckbox.Group
 const ImgCheckboxGroup = ImgCheckbox.Group
@@ -162,7 +163,7 @@ export default {
       let clipboard = new Clipboard('#copyBtn')
       clipboard.on('success', () => {
         this.$message.success(`复制成功，覆盖文件 src/config/config.js 然后重启项目即可生效`).then(() => {
-          const localConfig = localStorage.getItem(process.env.VUE_APP_SETTING_KEY)
+          const localConfig = getLocalStorage(process.env.VUE_APP_SETTING_KEY)
           if (localConfig) {
             console.warn('检测到本地有历史保存的主题配置，想要要拷贝的配置代码生效，您可能需要先重置配置')
             this.$message.warn('检测到本地有历史保存的主题配置，想要要拷贝的配置代码生效，您可能需要先重置配置', 5)
@@ -174,14 +175,14 @@ export default {
     saveSetting() {
       const closeMessage = this.$message.loading('正在保存到本地，请稍后...', 0)
       const config = this.extractConfig(true)
-      localStorage.setItem(process.env.VUE_APP_SETTING_KEY, JSON.stringify(config))
+      setLocalStorage(process.env.VUE_APP_SETTING_KEY, JSON.stringify(config))
       setTimeout(closeMessage, 800)
     },
     resetSetting() {
       this.$confirm({
         title: '重置主题会刷新页面，当前页面内容不会保留，确认重置？',
         onOk() {
-          localStorage.removeItem(process.env.VUE_APP_SETTING_KEY)
+          removeLocalStorage(process.env.VUE_APP_SETTING_KEY)
           window.location.reload()
         }
       })

src/config/config.js

@@ -5,6 +5,7 @@ module.exports = {
     mode: 'dark',
   },
   multiPage: true,
+  asyncRoutes: true,
   animate: {
     name: 'lightSpeed',
     direction: 'left'

src/pages/exception/403.vue

@@ -1,5 +1,5 @@
 <template>
-  <exception-page home-route="/dashboard/workplace" :style="`min-height: ${minHeight}`" type="403" />
+  <exception-page home-route="/" :style="`min-height: ${minHeight}`" type="403" />
 </template>
 
 <script>

src/pages/exception/404.vue

@@ -1,5 +1,5 @@
 <template>
-  <exception-page home-route="/dashboard/workplace" :style="`min-height: ${minHeight}`" type="404" />
+  <exception-page home-route="/" :style="`min-height: ${minHeight}`" type="404" />
 </template>
 
 <script>

src/pages/exception/500.vue

@@ -1,5 +1,5 @@
 <template>
-  <exception-page home-route="/dashboard/workplace" :style="`min-height: ${minHeight}`" type="500" />
+  <exception-page home-route="/" :style="`min-height: ${minHeight}`" type="500" />
 </template>
 
 <script>

src/pages/login/Login.vue

@@ -75,9 +75,9 @@
 
 <script>
 import CommonLayout from '@/layouts/CommonLayout'
-import {login, getRoutesConfig} from '@/services/user'
+import {login, logout} from '@/services/user'
 import {setAuthorization} from '@/utils/request'
-import {loadRoutes} from '@/utils/routerUtil'
+import {initRoutes} from '@/utils/routerUtil'
 import {mapMutations} from 'vuex'
 
 export default {
@@ -104,6 +104,7 @@ export default {
           this.logging = true
           const name = this.form.getFieldValue('name')
           const password = this.form.getFieldValue('password')
+          logout()
           login(name, password).then(this.afterLogin)
         }
       })
@@ -118,10 +119,8 @@ export default {
         this.setRoles(roles)
         setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
         // 获取路由配置
-        getRoutesConfig().then(result => {
+        initRoutes(() => {
-          const routesConfig = result.data.data
+          this.$router.push('/')
-          loadRoutes(routesConfig)
-          this.$router.push('/dashboard/workplace')
           this.$message.success(loginRes.message, 3)
         })
       } else {

src/router/async/router.map.js

@@ -5,8 +5,8 @@ const view = {
   page: () => import('@/layouts/PageView')
 }
 
-// 路由组件注册
+export const initRouterMap = () => {
-const routerMap = {
+  return {
     login: {
       authority: '*',
       path: '/login',
@@ -149,6 +149,11 @@ const routerMap = {
       name: '颜色复选框',
       component: () => import('@/pages/components/Palette')
     }
+  }
 }
+
+// 路由组件注册
+const routerMap = initRouterMap()
+
 export default routerMap
 

src/router/guards.js

@@ -1,6 +1,7 @@
 import {hasAuthority} from '@/utils/authority-utils'
 import {loginIgnore} from '@/router/index'
 import {checkAuthorization} from '@/utils/request'
+import {logout} from '@/services/user'
 import NProgress from 'nprogress'
 
 NProgress.configure({ showSpinner: false })
@@ -28,7 +29,8 @@ const progressStart = (to, from, next) => {
  */
 const loginGuard = (to, from, next, options) => {
   const {message} = options
-  if (!loginIgnore.includes(to) && !checkAuthorization()) {
+  if (!checkAuthorization() && !loginIgnore.includes(to)) {
+    logout()
     message.warning('登录已失效，请重新登录')
     next({path: '/login'})
   } else {

src/router/index.js

@@ -6,7 +6,8 @@ Vue.use(Router)
 
 // 不需要登录拦截的路由配置
 const loginIgnore = {
-  names: ['404', '403'],      //根据路由名称匹配
+  names: [], 
+  //names: ['404', '403'],      //根据路由名称匹配
   paths: ['/login'],   //根据路由fullPath匹配
   /**
    * 判断路由是否包含在该配置中

src/services/user.js

@@ -22,9 +22,6 @@ export async function getRoutesConfig() {
  * 退出登录
  */
 export function logout() {
-  localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY)
-  localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY)
-  localStorage.removeItem(process.env.VUE_APP_ROLES_KEY)
   removeAuthorization()
 }
 export default {

src/store/modules/account.js

@@ -1,3 +1,5 @@
+import {getLocalStorage, setLocalStorage} from '@/utils/cache'
+
 export default {
   namespaced: true,
   state: {
@@ -10,7 +12,7 @@ export default {
     user: state => {
       if (!state.user) {
         try {
-          const user = localStorage.getItem(process.env.VUE_APP_USER_KEY)
+          const user = getLocalStorage(process.env.VUE_APP_USER_KEY)
           state.user = JSON.parse(user)
         } catch (e) {
           console.error(e)
@@ -21,7 +23,7 @@ export default {
     permissions: state => {
       if (!state.permissions) {
         try {
-          const permissions = localStorage.getItem(process.env.VUE_APP_PERMISSIONS_KEY)
+          const permissions = getLocalStorage(process.env.VUE_APP_PERMISSIONS_KEY)
           state.permissions = JSON.parse(permissions)
           state.permissions = state.permissions ? state.permissions : []
         } catch (e) {
@@ -33,7 +35,7 @@ export default {
     roles: state => {
       if (!state.roles) {
         try {
-          const roles = localStorage.getItem(process.env.VUE_APP_ROLES_KEY)
+          const roles = getLocalStorage(process.env.VUE_APP_ROLES_KEY)
           state.roles = JSON.parse(roles)
           state.roles = state.roles ? state.roles : []
         } catch (e) {
@@ -45,7 +47,7 @@ export default {
     routesConfig: state => {
       if (!state.routesConfig) {
         try {
-          const routesConfig = localStorage.getItem(process.env.VUE_APP_ROUTES_KEY)
+          const routesConfig = getLocalStorage(process.env.VUE_APP_ROUTES_KEY)
           state.routesConfig = JSON.parse(routesConfig)
           state.routesConfig = state.routesConfig ? state.routesConfig : []
         } catch (e) {
@@ -58,19 +60,19 @@ export default {
   mutations: {
     setUser (state, user) {
       state.user = user
-      localStorage.setItem(process.env.VUE_APP_USER_KEY, JSON.stringify(user))
+      setLocalStorage(process.env.VUE_APP_USER_KEY, JSON.stringify(user))
     },
     setPermissions(state, permissions) {
       state.permissions = permissions
-      localStorage.setItem(process.env.VUE_APP_PERMISSIONS_KEY, JSON.stringify(permissions))
+      setLocalStorage(process.env.VUE_APP_PERMISSIONS_KEY, JSON.stringify(permissions))
     },
     setRoles(state, roles) {
       state.roles = roles
-      localStorage.setItem(process.env.VUE_APP_ROLES_KEY, JSON.stringify(roles))
+      setLocalStorage(process.env.VUE_APP_ROLES_KEY, JSON.stringify(roles))
     },
     setRoutesConfig(state, routesConfig) {
       state.routesConfig = routesConfig
-      localStorage.setItem(process.env.VUE_APP_ROUTES_KEY, JSON.stringify(routesConfig))
+      setLocalStorage(process.env.VUE_APP_ROUTES_KEY, JSON.stringify(routesConfig))
     }
   }
 }

src/utils/axios-interceptors.js

@@ -1,4 +1,4 @@
-import Cookie from 'js-cookie'
+import {getCookie} from '@/utils/cache'
 // 401拦截
 const resp401 = {
   /**
@@ -58,7 +58,7 @@ const reqCommon = {
   onFulfilled(config, options) {
     const {message} = options
     const {url, xsrfCookieName} = config
-    if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
+    if (url.indexOf('login') === -1 && xsrfCookieName && !getCookie(xsrfCookieName)) {
       message.warning('认证 token 已过期，请重新登录')
     }
     return config

src/utils/cache.js

@@ -0,0 +1,105 @@
+const Cookies = require('js-cookie')
+
+const prefix = process.env.VUE_APP_NAME || 'vue-antd-admin'
+
+// 动态获取cookie参数
+const getCookieAttr = () => {
+  return {
+    path: process.env.BASE_URL || '/'
+  }
+}
+
+const ck = (key) => {
+    return prefix + "." + key;
+}
+
+// 设置cookie值
+const setCookie = (key, value, options) => {
+    if (!key) {
+        return;
+    }
+    const cookieAttr = getCookieAttr()
+    if (options && typeof options === 'object') {
+        for (const key in options) {
+            cookieAttr[key] = options[key]
+        }
+    }
+    Cookies.set(ck(key), value, cookieAttr);
+}
+
+// 获取cookie值
+const getCookie = (key) => {
+    if (!key) {
+        return;
+    }
+    return Cookies.get(ck(key));
+}
+
+// 删除cookie值
+const removeCookie = (key) => {
+    if (!key) {
+        return;
+    }
+    return Cookies.remove(ck(key));
+}
+
+// 设置sessionStorage值
+const setSessionStore = (key, value) => {
+    if (!key) {
+        return;
+    }
+    sessionStorage.setItem(ck(key), value);
+}
+
+// 获取sessionStorage值
+const getSessionStore = (key) => {
+    if (!key) {
+        return;
+    }
+    return sessionStorage.getItem(ck(key));
+}
+
+// 删除sessionStorage值
+const removeSessionStore = (key) => {
+    if (!key) {
+        return;
+    }
+    return sessionStorage.removeItem(ck(key));
+}
+
+
+// 设置localStorage值
+const setLocalStorage = (key, value) => {
+    if (!key) {
+        return;
+    }
+    localStorage.setItem(ck(key), value);
+}
+
+// 获取localStorage值
+const getLocalStorage = (key) => {
+    if (!key) {
+        return;
+    }
+    return localStorage.getItem(ck(key));
+}
+
+// 删除localStorage值
+const removeLocalStorage = (key) => {
+    if (!key) {
+        return;
+    }
+    return localStorage.removeItem(ck(key));
+}
+
+module.exports = {
+    setCookie,
+    getCookie,
+    removeCookie,
+    setSessionStore,
+    getSessionStore,
+    removeSessionStore,
+    setLocalStorage,
+    getLocalStorage,
+    removeLocalStorage
+  }

src/utils/request.js

@@ -1,5 +1,6 @@
 import axios from 'axios'
-import Cookie from 'js-cookie'
+// import Cookie from 'js-cookie'
+import {setCookie, getCookie, removeCookie, removeLocalStorage} from '@/utils/cache'
 
 // 跨域认证信息 header 名
 const xsrfHeaderName = 'Authorization'
@@ -49,7 +50,7 @@ async function request(url, method, params, config) {
 function setAuthorization(auth, authType = AUTH_TYPE.BEARER) {
   switch (authType) {
     case AUTH_TYPE.BEARER:
-      Cookie.set(xsrfHeaderName, 'Bearer ' + auth.token, {expires: auth.expireAt})
+      setCookie(xsrfHeaderName, 'Bearer ' + auth.token, {expires: auth.expireAt})
       break
     case AUTH_TYPE.BASIC:
     case AUTH_TYPE.AUTH1:
@@ -66,7 +67,7 @@ function setAuthorization(auth, authType = AUTH_TYPE.BEARER) {
 function removeAuthorization(authType = AUTH_TYPE.BEARER) {
   switch (authType) {
     case AUTH_TYPE.BEARER:
-      Cookie.remove(xsrfHeaderName)
+      removeCookie(xsrfHeaderName)
       break
     case AUTH_TYPE.BASIC:
     case AUTH_TYPE.AUTH1:
@@ -74,6 +75,10 @@ function removeAuthorization(authType = AUTH_TYPE.BEARER) {
     default:
       break
   }
+  removeLocalStorage(process.env.VUE_APP_ROUTES_KEY)
+  removeLocalStorage(process.env.VUE_APP_PERMISSIONS_KEY)
+  removeLocalStorage(process.env.VUE_APP_ROLES_KEY)
+  removeLocalStorage(process.env.VUE_APP_USER_KEY)
 }
 
 /**
@@ -84,7 +89,7 @@ function removeAuthorization(authType = AUTH_TYPE.BEARER) {
 function checkAuthorization(authType = AUTH_TYPE.BEARER) {
   switch (authType) {
     case AUTH_TYPE.BEARER:
-      if (Cookie.get(xsrfHeaderName)) {
+      if (getCookie(xsrfHeaderName)) {
         return true
       }
       break

src/utils/routerUtil.js

@@ -1,8 +1,10 @@
-import routerMap from '@/router/async/router.map'
+import {initRouterMap} from '@/router/async/router.map'
 import {mergeI18nFromRoutes} from '@/utils/i18n'
 import Router from 'vue-router'
 import deepMerge from 'deepmerge'
 import basicOptions from '@/router/async/config.async'
+import {getRoutesConfig} from '@/services/user'
+import {checkAuthorization} from '@/utils/request'
 
 //应用配置
 let appOptions = {
@@ -89,6 +91,24 @@ function parseRoutes(routesConfig, routerMap) {
   return routes
 }
 
+/**
+ * 初始化路由
+ * @param func function 回调方法
+ */
+function initRoutes(func) {
+  if (!checkAuthorization()) {
+    return
+  }
+  getRoutesConfig().then(result => {
+    if (result.data.data && result.data.data.length > 0) {
+      loadRoutes(result.data.data)
+      if (func){
+        func(result)
+      }
+    }
+  })
+}
+
 /**
  * 加载路由
  * @param routesConfig {RouteConfig[]} 路由配置
@@ -109,17 +129,35 @@ function loadRoutes(routesConfig) {
   // 应用配置
   const {router, store, i18n} = appOptions
 
-  // 如果 routesConfig 有值，则更新到本地，否则从本地获取
+  // 如果 routesConfig 不存在则重新加载
+  if (!routesConfig || routesConfig.length <= 0) {
+    routesConfig = store.getters['account/routesConfig']
+    if (!routesConfig || routesConfig.length <= 0){
+      initRoutes()
+    }
+  }
+  // 如果 routesConfig 有值，则更新到本地
   if (routesConfig) {
     store.commit('account/setRoutesConfig', routesConfig)
-  } else {
-    routesConfig = store.getters['account/routesConfig']
   }
   // 如果开启了异步路由，则加载异步路由配置
   const asyncRoutes = store.state.setting.asyncRoutes
   if (asyncRoutes) {
     if (routesConfig && routesConfig.length > 0) {
-      const routes = parseRoutes(routesConfig, routerMap)
+      const routes = parseRoutes(routesConfig, initRouterMap())
+      // 解决动态路由初始化时找不到首页
+      if (routes && routes.length > 0) {
+        const getFirstChild = (routes) => {
+          const route = routes[0]
+          let path = route.path
+          if (!route.children || route.children.length === 0) {
+            return path
+          }
+          return !(path) || path === '/' ? '/' + getFirstChild(route.children) : path + '/'+ getFirstChild(route.children)
+        }
+        const redirect =  getFirstChild(routes)
+        routes[0].redirect = redirect
+      }
       const finalRoutes = mergeRoutes(basicOptions.routes, routes)
       formatRoutes(finalRoutes)
       router.options = {...router.options, routes: finalRoutes}
@@ -270,4 +308,4 @@ function loadGuards(guards, options) {
   })
 }
 
-export {parseRoutes, loadRoutes, formatAuthority, getI18nKey, loadGuards, deepMergeRoutes, formatRoutes, setAppOptions}
+export {parseRoutes, loadRoutes, initRoutes, formatAuthority, getI18nKey, loadGuards, deepMergeRoutes, formatRoutes, setAppOptions}

src/utils/themeUtil.js

@@ -2,6 +2,7 @@ const client = require('webpack-theme-color-replacer/client')
 const {theme} = require('../config')
 const {getMenuColors, getAntdColors, getThemeToggleColors, getFunctionalColors} = require('../utils/colors')
 const {ANTD} = require('../config/default')
+const {getLocalStorage} = require('./cache')
 
 function getThemeColors(color, $theme) {
   const _color = color || theme.color
@@ -82,7 +83,7 @@ function loadLocalTheme(localSetting) {
 function getLocalSetting(loadTheme) {
   let localSetting = {}
   try {
-    const localSettingStr = localStorage.getItem(process.env.VUE_APP_SETTING_KEY)
+    const localSettingStr = getLocalStorage(process.env.VUE_APP_SETTING_KEY)
     localSetting = JSON.parse(localSettingStr)
   } catch (e) {
     console.error(e)

vue.config.js

@@ -35,6 +35,7 @@ const assetsCDN = {
 }
 
 module.exports = {
+  lintOnSave: isProd,
   devServer: {
     // proxy: {
     //   '/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致