fix: 修改数据加密解密，新增登录校验，新增底部备案号

package.json

@@ -9,11 +9,12 @@
   },
   "dependencies": {
     "@types/color": "^3.0.3",
+    "@types/crypto-js": "^4.1.1",
     "@types/keymaster": "^1.6.30",
     "animate.css": "^4.1.1",
     "axios": "0.23.0",
     "color": "^4.2.3",
-    "crypto-ts": "^1.0.2",
+    "crypto-js": "^4.1.1",
     "echarts-liquidfill": "^3.1.0",
     "highlight.js": "^11.5.0",
     "html2canvas": "^1.4.1",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ lockfileVersion: 5.3
 
 specifiers:
   '@types/color': ^3.0.3
+  '@types/crypto-js': ^4.1.1
   '@types/keymaster': ^1.6.30
   '@types/node': ^16.11.26
   '@typescript-eslint/eslint-plugin': ^5.18.0
@@ -15,7 +16,7 @@ specifiers:
   animate.css: ^4.1.1
   axios: 0.23.0
   color: ^4.2.3
-  crypto-ts: ^1.0.2
+  crypto-js: ^4.1.1
   default-passive-events: ^2.0.0
   echarts: ^5.3.2
   echarts-liquidfill: ^3.1.0
@@ -53,11 +54,12 @@ specifiers:
 
 dependencies:
   '@types/color': 3.0.3
+  '@types/crypto-js': 4.1.1
   '@types/keymaster': 1.6.30
   animate.css: 4.1.1
   axios: 0.23.0
   color: 4.2.3
-  crypto-ts: 1.0.2
+  crypto-js: 4.1.1
   echarts-liquidfill: 3.1.0_echarts@5.3.2
   highlight.js: 11.5.0
   html2canvas: 1.4.1
@@ -624,6 +626,10 @@ packages:
       '@types/color-convert': 2.0.0
     dev: false
 
+  /@types/crypto-js/4.1.1:
+    resolution: {integrity: sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==}
+    dev: false
+
   /@types/estree/0.0.39:
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
     dev: true
@@ -1491,13 +1497,8 @@ packages:
       which: 2.0.2
     dev: true
 
-  /crypto-ts/1.0.2:
-    resolution: {integrity: sha512-TcBWwF8ghYhVd/qPSwvY4nsbDZRN/PVxQ1Uc8ryRLiX4M4C5XSPyIhVgR4M5mIhrQEnWIktLcrv+FIqhKk2t3g==}
-    peerDependencies:
-      '@angular/common': '>= 5.0.0'
-      '@angular/core': '>= 5.0.0'
-    dependencies:
-      tslib: 1.14.1
+  /crypto-js/4.1.1:
+    resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==}
     dev: false
 
   /css-line-break/2.1.0:
@@ -4016,6 +4017,7 @@ packages:
 
   /tslib/1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+    dev: true
 
   /tslib/2.3.0:
     resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}

src/enums/pageEnum.ts

@@ -30,7 +30,7 @@ export enum PageEnum {
 
   // 我的项目
   BASE_HOME_ITEMS = '/project/items',
-  BASE_HOME_ITEMS_NAME = 'Project-Ttems',
+  BASE_HOME_ITEMS_NAME = 'Project-Items',
 
   // 我的模板
   BASE_HOME_TEMPLATE = '/project/my-template',

src/layout/components/LayoutFooter/index.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="go-footer">
     <slot>
+      <n-space :size="50">
         <n-text depth="2">
           <n-a>{{ $t('global.doc_addr') }}: </n-a>
-        <n-a italic :href="docPath">
+          <n-a italic :href="docPath" target="_blank">
             {{ docPath }}
           </n-a>
         </n-text>
+        <n-text depth="3">
+          <n-a italic href="https://beian.miit.gov.cn/" target="_blank">
+            京ICP备2021034585号-1
+          </n-a>
+        </n-text>
+      </n-space>
     </slot>
   </div>
 </template>

src/router/router-guards.ts

@@ -1,6 +1,6 @@
 import { Router } from 'vue-router';
 import { PageEnum } from '@/enums/pageEnum'
-
+import { loginCheck } from '@/utils'
 
 export function createRouterGuards(router: Router) {
   // 前置
@@ -11,6 +11,13 @@ export function createRouterGuards(router: Router) {
     if (isErrorPage === -1) {
       next({ name: PageEnum.ERROR_PAGE_NAME_404 })
     }
+
+    if (!loginCheck()) {
+      if (to.name === PageEnum.BASE_LOGIN_NAME) {
+        next()
+      }
+      next({ name: PageEnum.BASE_LOGIN_NAME })
+    }
     next()
   })
 

src/utils/crypto.ts

@@ -1,29 +1,34 @@
-import * as CryptoJS from 'crypto-ts'
-// 加密
-const AES_KEY = 'mt'
+import CryptoJS from 'crypto-js'
+import { isString } from './type'
 
+const KEY = 'mt'
+
+/**
+ * * 加密
+ * @param data { string }
+ * @returns 
+ */
 export const cryptoEncode = (data: string): string => {
-  if (typeof data !== 'string') return ''
+  if (!isString(data)) return ''
   // 加密
-  const key = CryptoJS.enc.Utf8.parse(AES_KEY)
-  const str = JSON.stringify(data)
-  const encryptedData = CryptoJS.AES.encrypt(str, key, {
+  const encryptedData = CryptoJS.AES.encrypt(data, KEY, {
     mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.PKCS7,
-    iv: CryptoJS.enc.Utf8.parse(AES_KEY)
-  })
-  return encryptedData.toString()
+    padding: CryptoJS.pad.Pkcs7
+  }).toString()
+  return encryptedData
 }
-// 解密
+
+/**
+ * * 解密
+ * @param data { string }
+ * @returns 
+ */
 export const cryptoDecode = (data: string): string => {
-  if (typeof data !== 'string') return ''
-  const encryptedHexStr = CryptoJS.enc.Utf8.parse(data)
-  const encryptedBase64Str = CryptoJS.enc.Utf8.stringify(encryptedHexStr)
-  const key = CryptoJS.enc.Utf8.parse(AES_KEY)
-  const decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
+  if (!isString(data)) return ''
+  // 解密
+  const decryptedData = CryptoJS.AES.decrypt(data, KEY, {
     mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.PKCS7,
-    iv: CryptoJS.enc.Utf8.parse(AES_KEY)
+    padding: CryptoJS.pad.Pkcs7
   })
   return decryptedData.toString(CryptoJS.enc.Utf8)
 }

src/utils/router.ts

@@ -1,8 +1,11 @@
 import { useRoute } from 'vue-router'
 import { ResultEnum } from '@/enums/httpEnum'
 import { ErrorPageNameMap, PageEnum } from '@/enums/pageEnum'
-import router from '@/router'
 import { docPath, giteeSourceCodePath } from '@/settings/pathConst'
+import { cryptoDecode } from './crypto'
+import { StorageEnum } from '@/enums/storageEnum'
+import { clearLocalStorage, getLocalStorage } from './storage'
+import router from '@/router'
 
 /**
  * * 根据名字跳转路由
@@ -101,6 +104,7 @@ export const reloadRoutePage = () => {
  * * 退出
  */
 export const logout = () => {
+  clearLocalStorage(StorageEnum.GO_LOGIN_INFO_STORE)
   routerTurnByName(PageEnum.BASE_LOGIN_NAME)
 }
 
@@ -128,6 +132,10 @@ export const openGiteeSourceCode = () => {
   openNewWindow(giteeSourceCodePath)
 }
 
+/**
+ * * 判断是否是预览页
+ * @returns boolean
+ */
 export const isPreview = () => {
   return document.location.hash.includes('preview')
 }
@@ -152,3 +160,21 @@ export const fetchRouteParams = () => {
 export const goHome = () => {
   routerTurnByName(PageEnum.BASE_HOME_NAME)
 }
+
+/**
+ * * 判断是否登录（现阶段是有 login 数据即可）
+ * @return boolean
+ */
+export const loginCheck = () => {
+  try {
+    const info = getLocalStorage(StorageEnum.GO_LOGIN_INFO_STORE)
+    if (!info) return false
+    const decodeInfo = cryptoDecode(info)
+    if (decodeInfo) {
+      return true
+    }
+    return false
+  } catch (error) {
+    return false
+  }
+} 

src/utils/storage.ts

@@ -27,6 +27,14 @@ export const getLocalStorage = (k: string) => {
   }
 }
 
+/**
+ * * 清除本地会话数据
+ * @param name 
+ */
+ export const clearLocalStorage = (name: string) => {
+  window.localStorage.removeItem(name)
+}
+
 /**
  * * 存储临时会话数据
  * @param k 键名
@@ -53,3 +61,11 @@ export const getSessionStorage: (k: string) => any = (k: string) => {
     return item
   }
 }
+
+/**
+ * * 清除本地会话数据
+ * @param name 
+ */
+export const clearSessioStorage = (name: string) => {
+  window.sessionStorage.removeItem(name)
+}

src/views/login/index.vue

@@ -116,11 +116,6 @@
 
 <script lang="ts" setup>
 import { reactive, ref, onMounted } from 'vue'
-import {
-  routerTurnByName,
-  cryptoEncode,
-  setLocalStorage
-} from '@/utils'
 import shuffle from 'lodash/shuffle'
 import { carouselInterval } from '@/settings/designSetting'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
@@ -131,7 +126,7 @@ import { LayoutFooter } from '@/layout/components/LayoutFooter'
 import { PageEnum } from '@/enums/pageEnum'
 import { icon } from '@/plugins'
 import { StorageEnum } from '@/enums/storageEnum'
-
+import { routerTurnByName, cryptoEncode, setLocalStorage } from '@/utils'
 const { GO_LOGIN_INFO_STORE } = StorageEnum
 
 const { PersonOutlineIcon, LockClosedOutlineIcon } = icon.ionicons5
@@ -161,20 +156,20 @@ onMounted(() => {
 
 const formInline = reactive({
   username: 'admin',
-  password: '123456'
+  password: '123456',
 })
 
 const rules = {
   username: {
     required: true,
     message: t('global.form_account'),
-    trigger: 'blur'
+    trigger: 'blur',
   },
   password: {
     required: true,
     message: t('global.form_password'),
-    trigger: 'blur'
-  }
+    trigger: 'blur',
+  },
 }
 
 // 定时器
@@ -193,7 +188,7 @@ const bgList = ref([
   'heatmap',
   'map',
   'pie',
-  'radar'
+  'radar',
 ])
 
 // 处理url获取
@@ -220,7 +215,7 @@ const handleSubmit = (e: Event) => {
         cryptoEncode(
           JSON.stringify({
             username,
-            password
+            password,
           })
         )
       )