token改为使用cookie维护

package.json

@@ -39,6 +39,7 @@
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "2.2.28",
     "event-source-polyfill": "^1.0.31",
+    "js-cookie": "^3.0.5",
     "jsplumb": "^2.15.6",
     "jsrsasign": "^10.8.6",
     "loadsh": "^0.0.4",
@@ -68,6 +69,7 @@
     "xlsx-with-styles": "^0.17.2"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^17.0.21",
     "@types/nprogress": "^0.2.0",
     "@types/sortablejs": "^1.10.7",
@@ -112,4 +114,4 @@
     "url": "https://gitee.com/lyt-top/vue-next-admin.git"
   },
   "updateTime": "2024-05-20 09:22:34"
-}
+}

src/components/upload-wrapper/index.vue

@@ -10,13 +10,14 @@
 import { ElMessage } from 'element-plus';
 import type { UploadProps } from 'element-plus';
 import getOrigin from '/@/utils/origin'
+import { getToken } from "/@/utils/auth";
 
 const uploadUrl: string = getOrigin(import.meta.env.VITE_API_URL + '/common/singleImg');
 
 const source = localStorage.uploadFileWay
 
 const headers = {
-  Authorization: 'Bearer ' + sessionStorage.token,
+  Authorization: 'Bearer ' + getToken(),
 };
 
 const emit = defineEmits(['setImg', 'setImgs']);

src/components/upload/button.vue

@@ -21,9 +21,10 @@ import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import type { UploadProps } from 'element-plus';
 import getOrigin from '/@/utils/origin';
+import { getToken } from "/@/utils/auth";
 
 const headers = {
-	Authorization: 'Bearer ' + sessionStorage.token,
+	Authorization: 'Bearer ' + getToken(),
 };
 
 const emit = defineEmits(['update']);

src/components/upload/index.vue

@@ -29,11 +29,12 @@ import { ref, PropType, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import type { UploadProps } from 'element-plus'
 import getOrigin from '/@/utils/origin'
+import { getToken } from "/@/utils/auth";
 
 const uploadUrl: string = getOrigin(import.meta.env.VITE_API_URL + '/common/singleImg')
 
 const headers = {
-	Authorization: 'Bearer ' + sessionStorage.token,
+	Authorization: 'Bearer ' + getToken(),
 }
 
 const emit = defineEmits(['setImg', 'setImgs'])

src/components/upload/uploadFile.vue

@@ -12,11 +12,12 @@ import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import type { UploadProps } from 'element-plus';
 import getOrigin from '/@/utils/origin';
+import { getToken } from "/@/utils/auth";
 
 const source = localStorage.uploadFileWay
 
 const headers = {
-	Authorization: 'Bearer ' + sessionStorage.token,
+	Authorization: 'Bearer ' + getToken(),
 };
 
 const emit = defineEmits(['update']);

src/layout/navBars/breadcrumb/user.vue

@@ -87,6 +87,7 @@ import { Local } from '/@/utils/storage';
 import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
 import Search from '/@/layout/navBars/breadcrumb/search.vue';
 import api from '/@/api/system';
+import { removeToken } from "/@/utils/auth";
 
 export default defineComponent({
   name: 'layoutBreadcrumbUser',
@@ -173,6 +174,7 @@ export default defineComponent({
             setTimeout(() => {
               localStorage.clear(); // 清除缓存/token等
               sessionStorage.clear(); // 清除缓存/token等
+              removeToken(); // 清除缓存/token等
               window.location.href = ''; // 去登录页
             }, 500);
           })

src/router/backEnd.ts

@@ -4,8 +4,7 @@ import { NextLoading } from '/@/utils/loading';
 import { setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '/@/router/index';
 import { dynamicRoutes } from '/@/router/route';
 import api from '/@/api/system';
-
-
+import { getToken } from "/@/utils/auth";
 
 const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}');
 const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
@@ -28,7 +27,7 @@ export async function initBackEndControlRoutes() {
 	// 界面 loading 动画开始执行
 	if (window.nextLoading === undefined) NextLoading.start();
 	// 无 token 停止执行下一步
-	if (!sessionStorage.token) return false;
+	if (!getToken()) return false;
 	// 触发初始化用户信息
 	store.dispatch('userInfos/setUserInfos');
 	// store.dispatch('userInfos/setPermissions');

src/router/frontEnd.ts

@@ -1,6 +1,7 @@
 import { store } from '/@/store/index';
 import { NextLoading } from '/@/utils/loading';
 import { setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '/@/router/index';
+import { getToken } from "/@/utils/auth";
 
 /**
  * 前端控制路由：初始化方法，防止刷新时路由丢失
@@ -13,7 +14,7 @@ export async function initFrontEndControlRoutes() {
 	// 界面 loading 动画开始执行
 	if (window.nextLoading === undefined) NextLoading.start();
 	// 无 token 停止执行下一步
-	if (!sessionStorage.token) return false;
+	if (!getToken()) return false;
 	// 触发初始化用户信息
 	store.dispatch('userInfos/setUserInfos');
 	store.dispatch('userInfos/setPermissions');

src/router/index.ts

@@ -7,6 +7,7 @@ import { NextLoading } from '/@/utils/loading';
 import { staticRoutes, dynamicRoutes } from '/@/router/route';
 import { initFrontEndControlRoutes } from '/@/router/frontEnd';
 import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { getToken } from "/@/utils/auth";
 
 const whiteList = ['/login', '/sso/gitee']
 
@@ -221,7 +222,7 @@ router.beforeEach(async (to, from, next) => {
 
 
 	// 正常流程
-	const token = sessionStorage.token;
+	const token = getToken();
 	if (whiteList.includes(to.path) && !token) {
 		next();
 		NProgress.done();

src/utils/auth.ts

@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token: string) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/utils/request.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import getOrigin from '/@/utils/origin'
+import { getToken, removeToken } from "/@/utils/auth";
 
 // 配置新建一个 axios 实例
 const service = axios.create({
@@ -13,8 +14,8 @@ const service = axios.create({
 service.interceptors.request.use(
 	(config) => {
 		// 在发送请求之前做些什么 token
-		if (sessionStorage.token) {
-			(<any>config.headers).common['Authorization'] = `Bearer ${sessionStorage.token}`;
+		if (getToken()) {
+			(<any>config.headers).common['Authorization'] = `Bearer ${getToken()}`;
 		}
 		return config;
 	},
@@ -31,16 +32,12 @@ service.interceptors.response.use(
 		const res = response.data;
 		const code = response.data.code
 		if (code === 401) {
-			if (Date.now() - sessionStorage.comeTime < 1000) {
-				localStorage.clear(); // 清除缓存/token等
-				sessionStorage.clear(); // 清除缓存/token等
-				window.location.href = '/'; // 去登录页
-			}
 			ElMessageBox.alert('登录状态已过期，请重新登录', '提示',
 				{ confirmButtonText: '确定', showCancelButton: false, closeOnHashChange: false, closeOnPressEscape: false, closeOnClickModal: false, showClose: false })
 				.then(() => {
 					localStorage.clear(); // 清除缓存/token等
 					sessionStorage.clear(); // 清除缓存/token等
+					removeToken()
 					window.location.href = '/'; // 去登录页
 				})
 		} else if (code === undefined && res.message === undefined) { // 可能是下载文件

src/utils/request_ice104.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import getOrigin from '/@/utils/origin'
+import { getToken, removeToken } from "/@/utils/auth";
 
 // 配置新建一个 axios 实例
 const service = axios.create({
@@ -14,8 +15,8 @@ const service = axios.create({
 service.interceptors.request.use(
 	(config) => {
 		// 在发送请求之前做些什么 token
-		if (sessionStorage.token) {
-			(<any>config.headers).common['Authorization'] = `Bearer ${sessionStorage.token}`;
+		if (getToken()) {
+			(<any>config.headers).common['Authorization'] = `Bearer ${getToken()}`;
 		}
 		return config;
 	},
@@ -37,6 +38,7 @@ service.interceptors.response.use(
 				.then(() => {
 					localStorage.clear(); // 清除缓存/token等
 					sessionStorage.clear(); // 清除缓存/token等
+					removeToken()
 					window.location.href = '/'; // 去登录页
 				})
 				.catch(() => { });

src/utils/request_modbus.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import getOrigin from '/@/utils/origin'
+import { getToken, removeToken } from "/@/utils/auth";
 
 // 配置新建一个 axios 实例
 const service = axios.create({
@@ -13,8 +14,8 @@ const service = axios.create({
 service.interceptors.request.use(
 	(config) => {
 		// 在发送请求之前做些什么 token
-		if (sessionStorage.token) {
-			(<any>config.headers).common['Authorization'] = `Bearer ${sessionStorage.token}`;
+		if (getToken()) {
+			(<any>config.headers).common['Authorization'] = `Bearer ${getToken()}`;
 		}
 		return config;
 	},
@@ -36,6 +37,7 @@ service.interceptors.response.use(
 				.then(() => {
 					localStorage.clear(); // 清除缓存/token等
 					sessionStorage.clear(); // 清除缓存/token等
+					removeToken()
 					window.location.href = '/'; // 去登录页
 				})
 				.catch(() => { });

src/utils/storage.ts

@@ -1,3 +1,4 @@
+import { removeToken } from "/@/utils/auth";
 /**
  * window.localStorage 浏览器永久缓存
  * @method set 设置永久缓存
@@ -23,6 +24,7 @@ export const Local = {
 	clear() {
 		localStorage.clear(); // 清除缓存/token等
 		sessionStorage.clear(); // 清除缓存/token等
+		removeToken()
 	},
 };
 
@@ -50,5 +52,6 @@ export const Session = {
 	// 移除全部临时缓存
 	clear() {
 		window.sessionStorage.clear();
+		removeToken()
 	},
 };

src/views/iot/device/instance/component/excel.vue

@@ -42,7 +42,7 @@ import api from '/@/api/device';
 import { ElMessage, UploadProps } from "element-plus";
 import downloadFile from '/@/utils/download';
 import getOrigin from '/@/utils/origin';
-
+import { getToken } from "/@/utils/auth";
 
 interface RuleFormState {
   productKey: number | string;
@@ -68,7 +68,7 @@ export default defineComponent({
 
     const uploadUrl: string = getOrigin(import.meta.env.VITE_API_URL + "/product/device/import");
     const headers = {
-      Authorization: 'Bearer ' + sessionStorage.token,
+      Authorization: 'Bearer ' + getToken(),
     };
     const formRef = ref<HTMLElement | null>(null);
     const tagRef = ref<HTMLElement | null>(null);

src/views/iot/device/product/detail.vue

@@ -203,7 +203,7 @@ import EditAttr from './component/editAttr.vue';
 import EditFun from './component/editFun.vue';
 import EditEvent from './component/editEvent.vue';
 import EditTab from './component/editTab.vue';
-
+import { getToken } from "/@/utils/auth";
 import { useRoute } from 'vue-router';
 
 import api from '/@/api/device';
@@ -237,7 +237,7 @@ export default defineComponent({
 
 		const uploadUrl: string = getOrigin(import.meta.env.VITE_API_URL + "/product/tsl/import");
 		const headers = {
-			Authorization: 'Bearer ' + sessionStorage.token,
+			Authorization: 'Bearer ' + getToken(),
 		};
 		const route = useRoute();
 		const editDicRef = ref();

src/views/iot/ota-update/update/component/edit.vue

@@ -96,6 +96,7 @@ import getOrigin from '/@/utils/origin';
 import { checkVersion } from '/@/utils/validator';
 import apiSystem from "/@/api/system";
 import apiProduct from "/@/api/device"
+import { getToken } from "/@/utils/auth";
 import EditConfig from "/@/views/iot/ota-update/module/component/edit.vue";
 import ProductBind from "/@/views/iot/ota-update/update/component/productBind.vue";
 
@@ -135,7 +136,7 @@ export default defineComponent({
   name: 'otaEditUpdateData',
   setup(prop, { emit }) {
     const formRef = ref<HTMLElement | null>(null);
-    const headers = { Authorization: 'Bearer ' + sessionStorage.token, };
+    const headers = { Authorization: 'Bearer ' + getToken(), };
     const source = JSON.parse(localStorage.sysinfo || '{"uploadFileWay": 0}').uploadFileWay;
     const productRef = ref();
     const editDicRef = ref();

src/views/iot/property/dossier/component/from.vue

@@ -32,6 +32,7 @@
 import {onMounted, defineComponent, reactive, toRefs} from 'vue'
 import getOrigin from '/@/utils/origin'
 import { Plus } from '@element-plus/icons-vue'
+import { getToken } from "/@/utils/auth";
 
 interface FromState {
   dataList: any,
@@ -54,7 +55,7 @@ export default defineComponent({
   setup(prop, { emit }) {
     const uploadUrl = getOrigin(import.meta.env.VITE_API_URL + '/common/singleFile')
     const headers = {
-      Authorization: 'Bearer ' + sessionStorage.token,
+      Authorization: 'Bearer ' + getToken(),
     }
     // const emit = defineEmits(['SetSaveData'])
 

src/views/iot/rule-engine/edit.vue

@@ -30,6 +30,7 @@ import api from '/@/api/rule';
 import axios from 'axios';
 import { ruleRequired } from '/@/utils/validator';
 import { ElMessage } from 'element-plus';
+import { getToken } from "/@/utils/auth";
 
 const emit = defineEmits(['getList']);
 
@@ -41,7 +42,7 @@ const props = defineProps({
 });
 
 const headers = {
-	Authorization: 'Bearer ' + sessionStorage.token,
+	Authorization: 'Bearer ' + getToken(),
 };
 const flowsUrl = window.location.origin + '/rule-engine/flow';
 // const flowsUrl = 'http://zhgy.sagoo.cn/rule-engine/flow';

src/views/iot/rule-engine/index.vue

@@ -45,13 +45,14 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 import { useSearch } from '/@/hooks/useCommon';
 import EditForm from './edit.vue';
 import axios from 'axios';
+import { getToken } from "/@/utils/auth";
 
 const editFormRef = ref();
 
 const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'Data', { types: 0 });
 
 const headers = {
-	Authorization: 'Bearer ' + sessionStorage.token,
+	Authorization: 'Bearer ' + getToken(),
 };
 
 const flowsUrl = window.location.origin + '/rule-engine/flows';
@@ -97,7 +98,7 @@ const setStatus = async (row: any, status: number) => {
 };
 
 const edit = async (row: any) => {
-	localStorage.setItem('auth-tokens', `{"access_token":"${sessionStorage.token}"}`);
+	localStorage.setItem('auth-tokens', `{"access_token":"${getToken()}"}`);
 	const url = '/rule-engine/#flow/' + row.flowId;
 	window.open(url);
 };

src/views/iot/rule-engine/send.vue

@@ -51,13 +51,14 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 import { useSearch } from '/@/hooks/useCommon';
 import EditForm from './edit.vue';
 import axios from 'axios';
+import { getToken } from "/@/utils/auth";
 
 const editFormRef = ref();
 
 const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'Data', { types: 1 });
 
 const headers = {
-  Authorization: 'Bearer ' + sessionStorage.token,
+  Authorization: 'Bearer ' + getToken(),
 };
 const flowsUrl = window.location.origin + '/rule-engine/flows';
 
@@ -101,7 +102,7 @@ const setStatus = async (row: any, status: number) => {
 };
 
 const edit = async (row: any) => {
-  localStorage.setItem('auth-tokens', `{"access_token":"${sessionStorage.token}"}`);
+  localStorage.setItem('auth-tokens', `{"access_token":"${getToken()}"}`);
   const url = '/rule-engine/#flow/' + row.flowId;
   window.open(url);
 };

src/views/login/component/account.vue

@@ -64,6 +64,7 @@ import { Session, Local } from '/@/utils/storage';
 import { formatAxis } from '/@/utils/formatTime';
 import { encrypt } from '/@/utils/rsa'
 import api from '/@/api/system';
+import { setToken } from "/@/utils/auth";
 
 // 是否是开源版本
 const ISOPEN = import.meta.env.VITE_ISOPEN
@@ -153,7 +154,7 @@ export default defineComponent({
 									})
 								}
 
-								sessionStorage.setItem('token', res.token);
+								setToken(res.token);
 								localStorage.setItem('token', res.token);
 								const userInfos = res.userInfo;
 								userInfos.avatar = proxy.getUpFileUrl(userInfos.avatar);

src/views/sso/component/account.vue

@@ -60,6 +60,7 @@ import { Session, Local } from '/@/utils/storage';
 import { formatAxis } from '/@/utils/formatTime';
 import { encrypt } from '/@/utils/rsa'
 import api from '/@/api/system';
+import { setToken } from "/@/utils/auth";
 
 // 是否是开源版本
 const ISOPEN = import.meta.env.VITE_ISOPEN
@@ -136,7 +137,7 @@ export default defineComponent({
 									})
 								}
 
-								sessionStorage.setItem('token', res.token);
+								setToken(res.token);
 								localStorage.setItem('token', res.token);
 								const userInfos = res.userInfo;
 								userInfos.avatar = proxy.getUpFileUrl(userInfos.avatar);

src/views/sso/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, defineComponent, getCurrentInstance } from 'vue';
+import { computed, defineComponent, getCurrentInstance } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from '/@/store/index';
 import dayjs from 'dayjs';
@@ -17,6 +17,7 @@ import { initFrontEndControlRoutes } from '/@/router/frontEnd';
 import { initBackEndControlRoutes } from '/@/router/backEnd';
 import { formatAxis } from '/@/utils/formatTime';
 import { ElMessage } from 'element-plus';
+import { setToken } from "/@/utils/auth";
 
 // 定义接口来定义对象的类型
 interface LoginState {
@@ -60,7 +61,7 @@ export default defineComponent({
 			state: ''
 		}).then(async (res: any) => {
 
-			sessionStorage.setItem('token', res.token);
+			setToken(res.token);
 			localStorage.setItem('token', res.token);
 			const userInfos = res.userInfo;
 			userInfos.avatar = proxy.getUpFileUrl(userInfos.avatar);

yarn.lock

@@ -541,6 +541,11 @@
   resolved "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-2.0.1.tgz"
   integrity sha512-TF8aoF5cHcLO7W7403blM7L1T+6NF3XMyN3fxyUolq2uOcFeicG/khQg/dGxiCJWoAcmYulYN7LYSRKO54IXaA==
 
+"@types/js-cookie@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.6.tgz#a04ca19e877687bd449f5ad37d33b104b71fdf95"
+  integrity sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==
+
 "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz"
@@ -2089,6 +2094,11 @@ isexe@^2.0.0:
   resolved "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz"