use vuex

src/layouts/components/UserProfile.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import router from '@/router'
-import avatar1 from '@images/avatars/avatar-1.png'
+import router from '@/router';
+import avatar1 from '@images/avatars/avatar-1.png';
+import { useStore } from 'vuex';
+
+// Vuex Store
+const store = useStore();
 
 // 执行注销操作
 const logout = () => {
-  // 清除登录状态信息，例如删除令牌
-  localStorage.removeItem('token')
+  // 清除登录状态信息
+  store.dispatch('clearToken');
 
   // 重定向到登录页面或其他适当的页面
   router.push('/login')

src/main.ts

@@ -4,6 +4,7 @@ import App from '@/App.vue'
 import vuetify from '@/plugins/vuetify'
 import { loadFonts } from '@/plugins/webfontloader'
 import router from '@/router'
+import store from '@/store'
 import '@core/scss/template/index.scss'
 import '@layouts/styles/index.scss'
 import '@styles/styles.scss'
@@ -18,6 +19,7 @@ const app = createApp(App)
 // Use plugins
 app.use(vuetify)
 app.use(createPinia())
+app.use(store)
 app.use(router)
 
 // Mount vue app

src/pages/login.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import api from '@/api'
-import router from '@/router'
-import logo from '@images/logo.svg?raw'
+import api from '@/api';
+import router from '@/router';
+import logo from '@images/logo.svg?raw';
+import { useStore } from 'vuex';
 
+// Vuex Store
+const store = useStore();
+
+// 表单
 const form = ref({
   username: '',
   password: '',
@@ -54,13 +59,11 @@ const login = () => {
     })
     .then((response: any) => {
       // 获取token
-      const token = response.access_token
+      const token = response.access_token;
 
-      // 将token保存在本地存储中，用于后续请求
-      localStorage.setItem('token', token)
-
-      // 保存保持登录状态
-      localStorage.setItem('remember', form.value.remember.toString())
+      // 更新token和remember状态到Vuex Store
+      store.dispatch('updateToken', token);
+      store.dispatch('updateRemember', form.value.remember);
 
       // 跳转到首页
       router.push('/')
@@ -86,14 +89,12 @@ const login = () => {
 
 // 自动登录
 onMounted(() => {
-  // 获取token
-  const token = localStorage.getItem('token')
-
-  // 获取保持登录状态
-  const remember = localStorage.getItem('remember')
+  // 从Vuex Store中获取token和remember状态
+  const token = store.getters.getToken;
+  const remember = store.getters.getRemember;
 
   // 如果token存在，且保持登录状态为true，则跳转到首页
-  if (token && remember === 'true') {
+  if (token && remember) {
     router.push('/')
   }
   else {
@@ -190,6 +191,7 @@ onMounted(() => {
 
 <style lang="scss">
 @use "@core/scss/pages/page-auth.scss";
+
 .fade-in {
   animation: fadeIn 1s ease-in;
 }
@@ -198,6 +200,7 @@ onMounted(() => {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

src/router/index.ts

@@ -1,4 +1,5 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import store from '@/store';
+import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -103,23 +104,15 @@ const router = createRouter({
 
 // 导航守卫
 router.beforeEach((to, from, next) => {
-  const isAuthenticated = checkLoginStatus() // 检查用户是否已登录
+  // 通过 Vuex Store 检查用户是否已登录
+  const isAuthenticated = store.getters.getToken !== null;
   if (to.meta.requiresAuth && !isAuthenticated) {
     // 如果路由需要登录权限且用户未登录，则跳转到登录页面
-    next('/login')
-  }
-  else {
+    next('/login');
+  } else {
     // 否则，允许继续进行路由导航
-    next()
+    next();
   }
 })
 
-// 检查用户登录状态的函数
-function checkLoginStatus() {
-  // 在此处检查用户的登录状态，例如从本地存储中读取令牌或其他登录相关的信息
-  const token = localStorage.getItem('token')
-
-  return !!token // 返回一个布尔值，表示用户是否已登录
-}
-
 export default router

src/store/index.ts

@@ -0,0 +1,59 @@
+import { ActionTree, GetterTree, MutationTree, createStore } from 'vuex';
+import createPersistedState from 'vuex-persistedstate';
+
+interface State {
+  // 登录token
+  token: string | null;
+  // 是否记住登录状态
+  remember: boolean;
+}
+
+const state: State = {
+  token: null,
+  remember: false,
+};
+
+const mutations: MutationTree<State> = {
+  setToken(state, token: string) {
+    state.token = token;
+  },
+  clearToken(state) {
+    state.token = null;
+  },
+  setRemember(state, remember: boolean) {
+    state.remember = remember;
+  },
+};
+
+const actions: ActionTree<State, any> = {
+  updateToken({ commit }, token: string) {
+    commit('setToken', token);
+  },
+  clearToken({ commit },) {
+    commit('clearToken');
+  },
+  updateRemember({ commit }, remember: boolean) {
+    commit('setRemember', remember);
+  },
+};
+
+const getters: GetterTree<State, any> = {
+  getToken: state => state.token,
+  getRemember: state => state.remember,
+};
+
+const store = createStore({
+  state,
+  mutations,
+  actions,
+  getters,
+  plugins: [
+    createPersistedState({
+      // 配置持久化存储的选项
+      storage: window.localStorage, // 使用 localStorage 存储状态
+      key: 'moviepilot', // 存储的键名
+    }),
+  ],
+});
+
+export default store;