Merge 4329dce5587c00a2b6e5e3edd0cfc1954fee7b59 into 17e41ce1fc1537a90a48b0d0f408f49403faf31c

This commit is contained in:
Midaug 2023-04-11 14:31:58 +08:00 committed by GitHub
commit e0c1ba06ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 340 additions and 181 deletions

View File

@ -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",

View File

@ -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()
}
})

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 => {
const routesConfig = result.data.data
loadRoutes(routesConfig)
this.$router.push('/dashboard/workplace')
initRoutes(() => {
this.$router.push('/')
this.$message.success(loginRes.message, 3)
})
} else {

View File

@ -5,150 +5,155 @@ const view = {
page: () => import('@/layouts/PageView')
}
// 路由组件注册
const routerMap = {
login: {
authority: '*',
path: '/login',
component: () => import('@/pages/login')
},
root: {
path: '/',
name: '首页',
redirect: '/login',
component: view.tabs
},
dashboard: {
name: 'Dashboard',
component: view.blank
},
workplace: {
name: '工作台',
component: () => import('@/pages/dashboard/workplace')
},
analysis: {
name: '分析页',
component: () => import('@/pages/dashboard/analysis')
},
form: {
name: '表单页',
icon: 'form',
component: view.page
},
basicForm: {
path: 'basic',
name: '基础表单',
component: () => import('@/pages/form/basic')
},
stepForm: {
path: 'step',
name: '分步表单',
component: () => import('@/pages/form/step')
},
advanceForm: {
path: 'advance',
name: '高级表单',
component: () => import('@/pages/form/advance')
},
list: {
name: '列表页',
icon: 'table',
component: view.page
},
queryList: {
path: 'query',
name: '查询表格',
component: () => import('@/pages/list/QueryList')
},
primaryList: {
path: 'primary',
name: '标准列表',
component: () => import('@/pages/list/StandardList')
},
cardList: {
path: 'card',
name: '卡片列表',
component: () => import('@/pages/list/CardList')
},
searchList: {
path: 'search',
name: '搜索列表',
component: () => import('@/pages/list/search/SearchLayout')
},
article: {
name: '文章',
component: () => import('@/pages/list/search/ArticleList')
},
application: {
name: '应用',
component: () => import('@/pages/list/search/ApplicationList')
},
project: {
name: '项目',
component: () => import('@/pages/list/search/ProjectList')
},
details: {
name: '详情页',
icon: 'profile',
component: view.blank
},
basicDetails: {
path: 'basic',
name: '基础详情页',
component: () => import('@/pages/detail/BasicDetail')
},
advanceDetails: {
path: 'advance',
name: '高级详情页',
component: () => import('@/pages/detail/AdvancedDetail')
},
result: {
name: '结果页',
icon: 'check-circle-o',
component: view.page
},
success: {
name: '成功',
component: () => import('@/pages/result/Success')
},
error: {
name: '失败',
component: () => import('@/pages/result/Error')
},
exception: {
name: '异常页',
icon: 'warning',
component: view.blank
},
exp403: {
authority: '*',
name: 'exp403',
path: '403',
component: () => import('@/pages/exception/403')
},
exp404: {
name: 'exp404',
path: '404',
component: () => import('@/pages/exception/404')
},
exp500: {
name: 'exp500',
path: '500',
component: () => import('@/pages/exception/500')
},
components: {
name: '小组件',
icon: 'appstore-o',
component: view.page
},
taskCard: {
name: '任务卡片',
component: () => import('@/pages/components/TaskCard')
},
palette: {
name: '颜色复选框',
component: () => import('@/pages/components/Palette')
export const initRouterMap = () => {
return {
login: {
authority: '*',
path: '/login',
component: () => import('@/pages/login')
},
root: {
path: '/',
name: '首页',
redirect: '/login',
component: view.tabs
},
dashboard: {
name: 'Dashboard',
component: view.blank
},
workplace: {
name: '工作台',
component: () => import('@/pages/dashboard/workplace')
},
analysis: {
name: '分析页',
component: () => import('@/pages/dashboard/analysis')
},
form: {
name: '表单页',
icon: 'form',
component: view.page
},
basicForm: {
path: 'basic',
name: '基础表单',
component: () => import('@/pages/form/basic')
},
stepForm: {
path: 'step',
name: '分步表单',
component: () => import('@/pages/form/step')
},
advanceForm: {
path: 'advance',
name: '高级表单',
component: () => import('@/pages/form/advance')
},
list: {
name: '列表页',
icon: 'table',
component: view.page
},
queryList: {
path: 'query',
name: '查询表格',
component: () => import('@/pages/list/QueryList')
},
primaryList: {
path: 'primary',
name: '标准列表',
component: () => import('@/pages/list/StandardList')
},
cardList: {
path: 'card',
name: '卡片列表',
component: () => import('@/pages/list/CardList')
},
searchList: {
path: 'search',
name: '搜索列表',
component: () => import('@/pages/list/search/SearchLayout')
},
article: {
name: '文章',
component: () => import('@/pages/list/search/ArticleList')
},
application: {
name: '应用',
component: () => import('@/pages/list/search/ApplicationList')
},
project: {
name: '项目',
component: () => import('@/pages/list/search/ProjectList')
},
details: {
name: '详情页',
icon: 'profile',
component: view.blank
},
basicDetails: {
path: 'basic',
name: '基础详情页',
component: () => import('@/pages/detail/BasicDetail')
},
advanceDetails: {
path: 'advance',
name: '高级详情页',
component: () => import('@/pages/detail/AdvancedDetail')
},
result: {
name: '结果页',
icon: 'check-circle-o',
component: view.page
},
success: {
name: '成功',
component: () => import('@/pages/result/Success')
},
error: {
name: '失败',
component: () => import('@/pages/result/Error')
},
exception: {
name: '异常页',
icon: 'warning',
component: view.blank
},
exp403: {
authority: '*',
name: 'exp403',
path: '403',
component: () => import('@/pages/exception/403')
},
exp404: {
name: 'exp404',
path: '404',
component: () => import('@/pages/exception/404')
},
exp500: {
name: 'exp500',
path: '500',
component: () => import('@/pages/exception/500')
},
components: {
name: '小组件',
icon: 'appstore-o',
component: view.page
},
taskCard: {
name: '任务卡片',
component: () => import('@/pages/components/TaskCard')
},
palette: {
name: '颜色复选框',
component: () => import('@/pages/components/Palette')
}
}
}
// 路由组件注册
const routerMap = initRouterMap()
export default routerMap

View File

@ -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 {

View File

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

View File

@ -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 {

View File

@ -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))
}
}
}

View File

@ -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

105
src/utils/cache.js Normal file
View File

@ -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
}

View File

@ -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

View File

@ -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}

View File

@ -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)

View File

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