将锁屏密码和token保存在一起

src/layout/components/Topbar/LockModal.vue

@@ -44,7 +44,7 @@
  * @version: 
  * @Date: 2021-04-23 14:15:50
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-23 15:24:54
+ * @LastEditTime: 2021-04-28 09:23:23
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -87,9 +87,8 @@
 <script>
 import { defineComponent, reactive, ref } from 'vue'
 import Avatar from '@/components/Avatar/index.vue'
-import { setItem } from '@/utils/storage'
-import { AesEncryption } from '@/utils/encrypt'
 import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 
 export default defineComponent({
   components: {
@@ -97,6 +96,7 @@ export default defineComponent({
   },
   setup() {
     const router = useRouter()
+    const store = useStore()
     const dialogVisible = ref(false)
     const lockForm = ref(null)
     const lockModel = reactive({
@@ -111,11 +111,9 @@ export default defineComponent({
           return false
         }
 
-        // 对密码加密
-        const encryption = new AesEncryption()
-        const pwd = encryption.encryptByAES(lockModel.password)
-        // 存储到localStorage
-        setItem('__VEA_SCREEN_LOCKED__', pwd)
+        // 对密码加密并跟token保存在一起
+        store.dispatch('app/setScreenCode', lockModel.password)
+
         // 跳转到锁屏页面
         router.push('/lock?redirect=' + router.currentRoute.value.fullPath)
       })

src/permission.js

@@ -26,7 +26,7 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-25 13:50:27
+ * @LastEditTime: 2021-04-28 09:31:23
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -77,7 +77,9 @@ router.beforeEach(async to => {
     }
 
     // 判断是否处于锁屏状态
-    if (to.name !== 'lock' && !!getItem('__VEA_SCREEN_LOCKED__')) {
+    if (to.name !== 'lock') {
+      const { authorization } = store.state.app
+      if (!!authorization && !!authorization.screenCode) {
         return {
           name: 'lock',
           query: {
@@ -86,6 +88,7 @@ router.beforeEach(async to => {
           replace: true,
         }
       }
+    }
 
     // 如果没有权限，跳转到403页面
     if (

src/store/modules/app.js

@@ -3,13 +3,15 @@
  * @version:
  * @Date: 2021-04-20 11:06:21
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-21 09:34:07
+ * @LastEditTime: 2021-04-28 09:38:35
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
  * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
  */
 import { getItem, setItem, removeItem } from '@/utils/storage' //getItem和setItem是封装的操作localStorage的方法
+import { AesEncryption } from '@/utils/encrypt'
+import { toRaw } from 'vue'
 export const TOKEN = 'VEA-TOKEN'
 const COLLAPSE = 'VEA-COLLAPSE'
 
@@ -55,5 +57,27 @@ export default {
       // 清除用户信息
       commit('account/clearUserinfo', '', { root: true })
     },
+    setScreenCode({ commit, state }, password) {
+      const authorization = toRaw(state.authorization)
+
+      if (!password) {
+        try {
+          delete authorization.screenCode
+        } catch (err) {
+          console.log(err)
+        }
+        commit('setToken', authorization)
+
+        return
+      }
+
+      // 对密码加密
+      const screenCode = new AesEncryption().encryptByAES(password)
+
+      commit('setToken', {
+        ...authorization,
+        screenCode,
+      })
+    },
   },
 }

src/views/lock/Unlock.vue

@@ -37,7 +37,7 @@
  * @version: 
  * @Date: 2021-04-23 19:17:20
  * @LastEditors: huzhushan@126.com
- * @LastEditTime: 2021-04-25 10:57:31
+ * @LastEditTime: 2021-04-28 09:35:20
  * @Author: huzhushan@126.com
  * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
  * @Github: https://github.com/huzhushan/vue3-element-admin
@@ -106,12 +106,12 @@ export default defineComponent({
     const loading = ref(false)
 
     const checkPwd = async (rule, value, callback) => {
-      const encryption = new AesEncryption()
-      const cipher = getItem('__VEA_SCREEN_LOCKED__')
+      const { authorization } = store.state.app
+      const cipher = authorization && authorization.screenCode
       if (!cipher) {
         return callback()
       }
-      const pwd = encryption.decryptByAES(cipher)
+      const pwd = new AesEncryption().decryptByAES(cipher)
       if (pwd === value) {
         return callback()
       } else {
@@ -161,7 +161,8 @@ export default defineComponent({
 
         // 返回锁屏前的页面
         router.push({ path: route.query.redirect || '/', replace: true })
-        removeItem('__VEA_SCREEN_LOCKED__')
+        // 清除锁屏密码
+        store.dispatch('app/setScreenCode', '')
       })
     }
 
@@ -174,7 +175,6 @@ export default defineComponent({
       router.push('/login?redirect=' + (route.query.redirect || '/'))
       // 清除token
       store.dispatch('app/clearToken')
-      removeItem('__VEA_SCREEN_LOCKED__')
     }
 
     return {