From cdd26073afd1f34f8cdfcb2c54ecc27673ea4971 Mon Sep 17 00:00:00 2001
From: dayou <853094838@qq.com>
Date: Fri, 28 Jun 2024 18:46:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20user=E6=A8=A1=E5=9D=97=E7=9A=84pinia?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=20(#315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package.json                              |  1 +
 web/src/management/api/base.js                |  7 +--
 web/src/management/main.js                    |  3 ++
 .../pages/list/components/MemberSelect.vue    |  6 +--
 web/src/management/pages/list/index.vue       |  7 +--
 web/src/management/pages/login/LoginPage.vue  |  6 +--
 web/src/management/router/index.ts            | 11 ++--
 web/src/management/store/index.js             |  4 +-
 web/src/management/stores/user.js             | 51 +++++++++++++++++++
 web/src/render/main.js                        |  7 ++-
 web/src/render/pages/IndexPage.vue            |  1 -
 web/src/render/pages/RenderPage.vue           |  2 +-
 web/src/render/store/actions.js               |  1 -
 13 files changed, 85 insertions(+), 22 deletions(-)
 create mode 100644 web/src/management/stores/user.js

diff --git a/web/package.json b/web/package.json
index 114191e1..ad7c09f6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -27,6 +27,7 @@
     "moment": "^2.29.4",
     "nanoid": "^5.0.7",
     "node-forge": "^1.3.1",
+    "pinia": "^2.1.7",
     "qrcode": "^1.5.3",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
diff --git a/web/src/management/api/base.js b/web/src/management/api/base.js
index 45687330..1268f8bc 100644
--- a/web/src/management/api/base.js
+++ b/web/src/management/api/base.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
-import store from '@/management/store/index'
 import router from '@/management/router/index'
 import { get as _get } from 'lodash-es'
+import { useUserStore } from '../stores/user'
 
 export const CODE_MAP = {
   SUCCESS: 200,
@@ -36,8 +36,9 @@ instance.interceptors.response.use(
 )
 
 instance.interceptors.request.use((config) => {
-  const hasLogined = _get(store, 'state.user.hasLogined')
-  const token = _get(store, 'state.user.userInfo.token')
+  const userStore = useUserStore()
+  const hasLogined = _get(userStore, 'hasLogined')
+  const token = _get(userStore, 'userInfo.token')
   if (hasLogined && token) {
     if (!config.headers) {
       config.headers = {}
diff --git a/web/src/management/main.js b/web/src/management/main.js
index 56af3ac3..081784ef 100644
--- a/web/src/management/main.js
+++ b/web/src/management/main.js
@@ -1,14 +1,17 @@
 import { createApp } from 'vue'
 import store from './store'
+import { createPinia } from 'pinia'
 import plainText from './directive/plainText'
 import safeHtml from './directive/safeHtml'
 
 import App from './App.vue'
 import router from './router'
 
+const pinia = createPinia()
 const app = createApp(App)
 
 app.use(store)
+app.use(pinia)
 app.use(router)
 
 app.use(plainText)
diff --git a/web/src/management/pages/list/components/MemberSelect.vue b/web/src/management/pages/list/components/MemberSelect.vue
index e36437cd..9bb83ad2 100644
--- a/web/src/management/pages/list/components/MemberSelect.vue
+++ b/web/src/management/pages/list/components/MemberSelect.vue
@@ -23,7 +23,6 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useStore } from 'vuex'
 import MemberList from './MemberList.vue'
 import { getUserList } from '@/management/api/space'
 import {
@@ -33,8 +32,9 @@ import {
   roleLabels
 } from '@/management/utils/types/workSpace'
 import { CODE_MAP } from '@/management/api/base'
+import { useUserStore } from '@/management/stores/user'
 
-const store = useStore()
+const userStore = useUserStore()
 const props = withDefaults(
   defineProps<{
     members?: IMember[]
@@ -65,7 +65,7 @@ const remoteMethod = async (query: string) => {
     if (res.code === CODE_MAP.SUCCESS) {
       selectOptions.value = res.data.map((item: any) => {
         // 不可以选中自己
-        const currentUser = item.username === store.state.user.userInfo.username
+        const currentUser = item.username === userStore.userInfo.username
         return {
           value: item.userId,
           label: item.username,
diff --git a/web/src/management/pages/list/index.vue b/web/src/management/pages/list/index.vue
index 3a86203a..4b2cc0ee 100644
--- a/web/src/management/pages/list/index.vue
+++ b/web/src/management/pages/list/index.vue
@@ -67,11 +67,12 @@ import SpaceList from './components/SpaceList.vue'
 import SliderBar from './components/SliderBar.vue'
 import SpaceModify from './components/SpaceModify.vue'
 import { SpaceType } from '@/management/utils/types/workSpace'
-
+import { useUserStore } from '@/management/stores/user'
 const store = useStore()
+const userStore = useUserStore()
 const router = useRouter()
 const userInfo = computed(() => {
-  return store.state.user.userInfo
+  return userStore.userInfo
 })
 const loading = ref(false)
 const surveyList = computed(() => {
@@ -152,7 +153,7 @@ const onCreate = () => {
   router.push('/create')
 }
 const handleLogout = () => {
-  store.dispatch('user/logout')
+  userStore.logout()
   router.replace({ name: 'login' })
 }
 </script>
diff --git a/web/src/management/pages/login/LoginPage.vue b/web/src/management/pages/login/LoginPage.vue
index d502cf84..6564c9bf 100644
--- a/web/src/management/pages/login/LoginPage.vue
+++ b/web/src/management/pages/login/LoginPage.vue
@@ -57,7 +57,6 @@
 
 <script setup lang="ts">
 import { onMounted, ref, reactive } from 'vue'
-import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 
 import { ElMessage } from 'element-plus'
@@ -66,8 +65,8 @@ import 'element-plus/theme-chalk/src/message.scss'
 import { login, register } from '@/management/api/auth'
 import { refreshCaptcha as refreshCaptchaApi } from '@/management/api/captcha'
 import { CODE_MAP } from '@/management/api/base'
+import { useUserStore } from '@/management/stores/user'
 
-const store = useStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -150,7 +149,8 @@ const submitForm = (type: 'login' | 'register') => {
           ElMessage.error(res.errmsg)
           throw new Error('登录/注册失败' + res.errmsg)
         }
-        store.dispatch('user/login', {
+        const userStore = useUserStore()
+        userStore.login({
           username: res.data.username,
           token: res.data.token
         })
diff --git a/web/src/management/router/index.ts b/web/src/management/router/index.ts
index 3bf8c32f..f1e82aff 100644
--- a/web/src/management/router/index.ts
+++ b/web/src/management/router/index.ts
@@ -5,6 +5,7 @@ import { SurveyPermissions } from '@/management/utils/types/workSpace'
 import { analysisTypeMap } from '@/management/config/analysisConfig'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
+import { useUserStore } from '@/management/stores/user'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -156,10 +157,11 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-  const store = useStore();
+  const store = useStore()
+  const userStore = useUserStore()
   // 初始化用户信息
-  if (!store.state.user?.initialized) {
-    await store.dispatch('user/init');
+  if (!userStore?.initialized) {
+    await userStore.init();
   }
   // 更新页面标题
   if (to.meta.title) {
@@ -174,7 +176,8 @@ router.beforeEach(async (to, from, next) => {
 });
 
 async function handleLoginGuard(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext, store: Store<any>) {
-  if (store.state.user?.hasLogined) {
+  const userStore = useUserStore();
+  if (userStore?.hasLogined) {
     await handlePermissionsGuard(to, from, next, store);
   } else {
     next({
diff --git a/web/src/management/store/index.js b/web/src/management/store/index.js
index c0ca999b..f297afed 100644
--- a/web/src/management/store/index.js
+++ b/web/src/management/store/index.js
@@ -1,6 +1,6 @@
 import { createStore } from 'vuex'
 import edit from './edit'
-import user from './user'
+// import user from './user'
 import list from './list'
 import actions from './actions'
 import mutations from './mutations'
@@ -13,7 +13,7 @@ export default createStore({
   actions,
   modules: {
     edit,
-    user,
+    // user,
     list
   }
 })
diff --git a/web/src/management/stores/user.js b/web/src/management/stores/user.js
new file mode 100644
index 00000000..ddb963de
--- /dev/null
+++ b/web/src/management/stores/user.js
@@ -0,0 +1,51 @@
+// Pinia Store
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+
+const USER_INFO_KEY = 'surveyUserInfo'
+export const useUserStore = defineStore('user', () => {
+  const userInfo = ref({
+    username: '',
+    token: ''
+  })
+  const hasLogined = ref(false)
+  const loginTime = ref(null)
+  const initialized = ref(false)
+
+  const init = () => {
+    const localData = localStorage.getItem(USER_INFO_KEY)
+    if (localData) {
+      try {
+        const { userInfo: info, loginTime } = JSON.parse(localData)
+        if (Date.now() - loginTime > 7 * 3600000) {
+          localStorage.removeItem(USER_INFO_KEY)
+        } else {
+          login(info)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    initialized.value = true
+  }
+  const login = (data) => {
+    userInfo.value = data
+    hasLogined.value = true
+    loginTime.value = Date.now()
+    localStorage.setItem(
+      USER_INFO_KEY,
+      JSON.stringify({
+        userInfo: data,
+        loginTime: loginTime
+      })
+    )
+  }
+  const logout = () =>  {
+    userInfo.value = null
+    hasLogined.value = false
+    localStorage.removeItem(USER_INFO_KEY)
+  }
+
+  return { userInfo, hasLogined, loginTime, initialized, init, login, logout }
+})
\ No newline at end of file
diff --git a/web/src/render/main.js b/web/src/render/main.js
index e8cc2762..b7c1c9bc 100644
--- a/web/src/render/main.js
+++ b/web/src/render/main.js
@@ -3,14 +3,19 @@ import App from './App.vue'
 import EventBus from './utils/eventbus'
 import router from './router'
 import store from './store'
+import { createPinia } from 'pinia'
+
 
 const app = createApp(App)
+const pinia = createPinia()
 
 const $bus = new EventBus()
 app.provide('$bus', $bus)
 // 挂载到this上
 app.config.globalProperties.$bus = $bus
-app.use(router)
 app.use(store)
+app.use(pinia)
+app.use(router)
+
 
 app.mount('#app')
diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue
index 338f03a5..132df03f 100644
--- a/web/src/render/pages/IndexPage.vue
+++ b/web/src/render/pages/IndexPage.vue
@@ -11,7 +11,6 @@ import useCommandComponent from '../hooks/useCommandComponent'
 
 import AlertDialog from '../components/AlertDialog.vue'
 import { initRuleEngine } from '@/render/hooks/useRuleEngine.js'
-
 const store = useStore()
 const route = useRoute()
 const loadData = (res: any, surveyPath: string) => {
diff --git a/web/src/render/pages/RenderPage.vue b/web/src/render/pages/RenderPage.vue
index a43e0715..cdc25463 100644
--- a/web/src/render/pages/RenderPage.vue
+++ b/web/src/render/pages/RenderPage.vue
@@ -80,7 +80,7 @@ const normalizationRequestBody = () => {
     difTime: Date.now() - enterTime,
     clientTime: Date.now()
   }
-
+  
   if (encryptInfo?.encryptType) {
     result.encryptType = encryptInfo?.encryptType
     result.data = encrypt[result.encryptType as 'rsa']({
diff --git a/web/src/render/store/actions.js b/web/src/render/store/actions.js
index 2c3a93f4..c6a5122d 100644
--- a/web/src/render/store/actions.js
+++ b/web/src/render/store/actions.js
@@ -58,7 +58,6 @@ export default {
     }
     router.push({ name: 'renderPage' })
 
-
     // 根据初始的schema生成questionData, questionSeq, rules, formValues, 这四个字段
     const { questionData, questionSeq, rules, formValues } = adapter.generateData({
       bannerConf,