前端退出时只删除token缓存 保留布局样式等缓存

Web/src/layout/navBars/breadcrumb/setings.vue

@@ -1,13 +1,6 @@
 <template>
 	<div class="layout-breadcrumb-seting">
-		<el-drawer
-			:title="$t('message.layout.configTitle')"
-			v-model="getThemeConfig.isDrawer"
-			direction="rtl"
-			destroy-on-close
-			size="260px"
-			@close="onDrawerClose"
-		>
+		<el-drawer :title="$t('message.layout.configTitle')" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="260px" @close="onDrawerClose">
 			<el-scrollbar class="layout-breadcrumb-seting-bar">
 				<!-- 全局主题 -->
 				<el-divider content-position="left">{{ $t('message.layout.oneTitle') }}</el-divider>
@@ -67,42 +60,25 @@
 				</div>
 
 				<!-- 分栏设置 -->
-				<el-divider content-position="left" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">{{
-					$t('message.layout.twoColumnsTitle')
-				}}</el-divider>
+				<el-divider content-position="left" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">{{ $t('message.layout.twoColumnsTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBar') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-color-picker
-							v-model="getThemeConfig.columnsMenuBar"
-							size="default"
-							@change="onBgColorPickerChange('columnsMenuBar')"
-							:disabled="getThemeConfig.layout !== 'columns'"
-						>
+						<el-color-picker v-model="getThemeConfig.columnsMenuBar" size="default" @change="onBgColorPickerChange('columnsMenuBar')" :disabled="getThemeConfig.layout !== 'columns'">
 						</el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBarColor') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-color-picker
-							v-model="getThemeConfig.columnsMenuBarColor"
-							size="default"
-							@change="onBgColorPickerChange('columnsMenuBarColor')"
-							:disabled="getThemeConfig.layout !== 'columns'"
-						>
+						<el-color-picker v-model="getThemeConfig.columnsMenuBarColor" size="default" @change="onBgColorPickerChange('columnsMenuBarColor')" :disabled="getThemeConfig.layout !== 'columns'">
 						</el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsColumnsMenuBarColorGradual') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isColumnsMenuBarColorGradual"
-							size="small"
-							@change="onColumnsMenuBarGradualChange"
-							:disabled="getThemeConfig.layout !== 'columns'"
-						></el-switch>
+						<el-switch v-model="getThemeConfig.isColumnsMenuBarColorGradual" size="small" @change="onColumnsMenuBarGradualChange" :disabled="getThemeConfig.layout !== 'columns'"></el-switch>
 					</div>
 				</div>
 
@@ -111,23 +87,13 @@
 				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsCollapse') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isCollapse"
-							:disabled="getThemeConfig.layout === 'transverse'"
-							size="small"
-							@change="onThemeConfigChange"
-						></el-switch>
+						<el-switch v-model="getThemeConfig.isCollapse" :disabled="getThemeConfig.layout === 'transverse'" size="small" @change="onThemeConfigChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsUniqueOpened') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isUniqueOpened"
-							:disabled="getThemeConfig.layout === 'transverse'"
-							size="small"
-							@change="setLocalThemeConfig"
-						></el-switch>
+						<el-switch v-model="getThemeConfig.isUniqueOpened" :disabled="getThemeConfig.layout === 'transverse'" size="small" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -139,13 +105,7 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout !== 'classic' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsClassicSplitMenu') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isClassicSplitMenu"
-							:disabled="getThemeConfig.layout !== 'classic'"
-							size="small"
-							@change="onClassicSplitMenuChange"
-						>
-						</el-switch>
+						<el-switch v-model="getThemeConfig.isClassicSplitMenu" :disabled="getThemeConfig.layout !== 'classic'" size="small" @change="onClassicSplitMenuChange"> </el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -157,16 +117,7 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt11">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeLockScreenTime') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-input-number
-							v-model="getThemeConfig.lockScreenTime"
-							controls-position="right"
-							:min="1"
-							:max="9999"
-							@change="setLocalThemeConfig"
-							size="default"
-							style="width: 90px"
-						>
-						</el-input-number>
+						<el-input-number v-model="getThemeConfig.lockScreenTime" controls-position="right" :min="1" :max="9999" @change="setLocalThemeConfig" size="default" style="width: 90px"> </el-input-number>
 					</div>
 				</div>
 
@@ -178,10 +129,7 @@
 						<el-switch v-model="getThemeConfig.isShowLogo" size="small" @change="onIsShowLogoChange"></el-switch>
 					</div>
 				</div>
-				<div
-					class="layout-breadcrumb-seting-bar-flex mt15"
-					:style="{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }"
-				>
+				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumb') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
@@ -219,12 +167,7 @@
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: isMobile ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsSortableTagsView') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch
-							v-model="getThemeConfig.isSortableTagsView"
-							:disabled="isMobile ? true : false"
-							size="small"
-							@change="onSortableTagsViewChange"
-						></el-switch>
+						<el-switch v-model="getThemeConfig.isSortableTagsView" :disabled="isMobile ? true : false" size="small" @change="onSortableTagsViewChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -523,8 +466,7 @@ export default defineComponent({
 			} else {
 				if (getThemeConfig.value.isInvert) getThemeConfig.value.isGrayscale = false;
 			}
-			const cssAttr =
-				attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
+			const cssAttr = attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
 			const appEle: any = document.body;
 			appEle.setAttribute('style', `filter: ${cssAttr}`);
 			setLocalThemeConfig();

Web/src/layout/navBars/breadcrumb/user.vue

@@ -83,12 +83,12 @@ import { storeToRefs } from 'pinia';
 import { useUserInfo } from '/@/stores/userInfo';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import other from '/@/utils/other';
-import { Session, Local } from '/@/utils/storage';
+import { Local } from '/@/utils/storage';
 import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
 import Search from '/@/layout/navBars/breadcrumb/search.vue';
 
 import OnlineUser from '/@/views/system/onlineUser/index.vue';
-import { getAPI } from '/@/utils/axios-utils';
+import { clearAccessTokens, getAPI } from '/@/utils/axios-utils';
 import { SysAuthApi, SysNoticeApi } from '/@/api-services/api';
 
 export default defineComponent({
@@ -161,11 +161,7 @@ export default defineComponent({
 					},
 				})
 					.then(async () => {
-						// 清除缓存 Token 等
-						Session.clear();
-						Local.clear();
-						// 使用 reload 时，不需要调用 resetRoute() 重置路由
-						window.location.reload();
+						clearAccessTokens();
 					})
 					.catch(() => {});
 			} else if (path === 'wareHouse') {

Web/src/router/backEnd.ts

@@ -2,7 +2,7 @@ import { RouteRecordRaw } from 'vue-router';
 import pinia from '/@/stores/index';
 import { useUserInfo } from '/@/stores/userInfo';
 import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
-import { Local, Session } from '/@/utils/storage';
+import { Session } from '/@/utils/storage';
 import { NextLoading } from '/@/utils/loading';
 import { dynamicRoutes, notFoundAndNoPower } from '/@/router/route';
 import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index';
@@ -106,8 +106,7 @@ export async function getBackEndControlRoutes() {
 	if (res.data.result == undefined || res.data.result.length < 1) {
 		ElMessage.error('没有任何菜单权限，请联系管理员！');
 		setTimeout(() => {
-			Session.clear();
-			Local.clear();
+			Session.removeToken();
 			window.location.reload();
 		}, 3000);
 	}

Web/src/utils/axios-utils.ts

@@ -28,16 +28,19 @@ export const getToken = () => {
 
 // 清除 token
 export const clearAccessTokens = () => {
-	Local.remove(accessTokenKey);
-	Local.remove(refreshAccessTokenKey);
-
-	// 清除其他
-	Session.clear();
+	clearTokens();
 
 	// 刷新浏览器
 	window.location.reload();
 };
 
+// 清除 token
+export const clearTokens = () => {
+	Local.remove(accessTokenKey);
+	Local.remove(refreshAccessTokenKey);
+	Session.removeToken();
+};
+
 // axios 默认实例
 export const axiosInstance: AxiosInstance = globalAxios;
 

Web/src/utils/storage.ts

@@ -56,4 +56,10 @@ export const Session = {
 		Cookies.remove('token');
 		window.sessionStorage.clear();
 	},
+	// 移除Token缓存
+	removeToken() {
+		var key = 'token';
+		Cookies.remove(key);
+		window.sessionStorage.removeItem(key);
+	},
 };

Web/src/views/error/401.vue

@@ -25,7 +25,7 @@ import { defineComponent, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
-import { Session } from '/@/utils/storage';
+import { clearAccessTokens } from '/@/utils/axios-utils';
 
 export default defineComponent({
 	name: '401',
@@ -35,11 +35,7 @@ export default defineComponent({
 		const { themeConfig } = storeToRefs(storesThemeConfig);
 		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const onSetAuth = () => {
-			// https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
-			// 清除缓存/token等
-			Session.clear();
-			// 使用 reload 时，不需要调用 resetRoute() 重置路由
-			window.location.reload();
+			clearAccessTokens();
 		};
 		// 设置主内容的高度
 		const initTagViewHeight = computed(() => {

Web/src/views/login/component/account.vue

@@ -77,16 +77,12 @@ import { toRefs, reactive, defineComponent, computed, ref, onMounted } from 'vue
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
-// import Cookies from 'js-cookie';
-// import { storeToRefs } from 'pinia';
-// import { useThemeConfig } from '/@/stores/themeConfig';
-// import { initFrontEndControlRoutes } from '/@/router/frontEnd';
 import { initBackEndControlRoutes } from '/@/router/backEnd';
-import { Session, Local } from '/@/utils/storage';
+import { Session } from '/@/utils/storage';
 import { formatAxis } from '/@/utils/formatTime';
 import { NextLoading } from '/@/utils/loading';
 
-import { feature, getAPI } from '/@/utils/axios-utils';
+import { clearTokens, feature, getAPI } from '/@/utils/axios-utils';
 import { SysAuthApi } from '/@/api-services/api';
 import { SysTenant } from '/@/api-services/models';
 
@@ -99,8 +95,6 @@ export default defineComponent({
 	components: { DragVerifyImgRotate },
 	setup() {
 		const { t } = useI18n();
-		// const storesThemeConfig = useThemeConfig();
-		// const { themeConfig } = storeToRefs(storesThemeConfig);
 		const route = useRoute();
 		const router = useRouter();
 
@@ -156,8 +150,7 @@ export default defineComponent({
 		// 登录
 		const onSignIn = async () => {
 			// 先清空缓存
-			Session.clear();
-			Local.clear();
+			clearTokens();
 
 			const [err, res] = await feature(getAPI(SysAuthApi).loginPost(state.ruleForm));
 			if (err) {
@@ -170,21 +163,11 @@ export default defineComponent({
 			}
 
 			state.loading.signIn = true;
-			// 存储 token 到浏览器缓存
-			Session.set('token', res.data.result?.accessToken);
-			// // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
-			// Cookies.set('userName', state.ruleForm.account);
-			// if (!themeConfig.value.isRequestRoutes) {
-			// 	// 前端控制路由，2、请注意执行顺序
-			// 	await initFrontEndControlRoutes();
-			// 	signInSuccess();
-			// } else {
-			// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
-			// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
+			Session.set('token', res.data.result?.accessToken); // 缓存token
+			// 添加完动态路由再进行router跳转，否则可能报错 No match found for location with path "/"
 			await initBackEndControlRoutes();
-			// 执行完 initBackEndControlRoutes，再执行 signInSuccess
+			// 再执行 signInSuccess
 			signInSuccess();
-			// }
 		};
 		// 登录成功后的跳转
 		const signInSuccess = () => {
@@ -242,8 +225,6 @@ export default defineComponent({
 .dialog-header {
 	:deep(.el-dialog) {
 		.el-dialog__header {
-			// padding: 0px !important;
-			// background: #fff !important;
 			display: none;
 		}
 	}

Web/src/views/system/user/component/userCenter.vue

@@ -136,11 +136,10 @@ import { toRefs, reactive, defineComponent, ref, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { ElMessageBox, UploadInstance } from 'element-plus';
 import { useUserInfo } from '/@/stores/userInfo';
-import { Session } from '/@/utils/storage';
 import { base64ToFile } from '/@/utils/base64Conver';
 import OrgTree from '/@/views/system/user/component/orgTree.vue';
 
-import { getAPI } from '/@/utils/axios-utils';
+import { clearAccessTokens, getAPI } from '/@/utils/axios-utils';
 import { SysFileApi, SysUserApi } from '/@/api-services/api';
 import { ChangePwdInput, SysUser } from '/@/api-services/models';
 
@@ -257,9 +256,7 @@ export default defineComponent({
 					cancelButtonText: '取消',
 					type: 'warning',
 				}).then(async () => {
-					// 清除缓存
-					Session.clear();
-					window.location.reload();
+					clearAccessTokens();
 				});
 			});
 		};