使用vuex 存储和管理权限

vue/afvue/src/main.js

@@ -3,6 +3,7 @@ import { createPinia, PiniaVuePlugin } from 'pinia'
 import { VueAxios } from './utils/request'
 import App from './App.vue'
 import router from './router'
+import store from './store' // 导入Vuex store
 // 导入权限控制模块
 import './permission'
 
@@ -15,6 +16,6 @@ Vue.use(VueAxios)
 
 new Vue({
   router,
-  store: pinia,
+  store, // 使用Vuex store
   render: (h) => h(App)
 }).$mount('#app')

vue/afvue/src/permission.js

@@ -1,6 +1,6 @@
 import router from './router'
-import { userStStore } from './stores/user'
-import { useCounterStore } from './stores/counter'
+import store from './store' // 导入Vuex store
+import storage from 'store'
 import NProgress from 'nprogress' // progress bar
 import '@/components/nprogress.css' // progress bar style
 
@@ -9,22 +9,31 @@ NProgress.configure({ showSpinner: false }) // NProgress Configuration
 // 登录页面
 const loginRoutePath = '/login'
 // 白名单
-const whiteList = [loginRoutePath]
+const whiteList = [loginRoutePath, '/404', '/401']
+// 默认路由地址
+const defaultRoutePath = '/'
 
-
-
-
-// 路由守卫
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar
   
-//   // 获取用户store实例
-  const userStore = useCounterStore()
-  // console.log(userStore.token,"user token")
-
-//   // 检查token
-//   console.log("check token")
-
+  // 检查是否在白名单中
+  if (whiteList.includes(to.path)) {
+    next()
+    NProgress.done()
+    return
+  }
+  
+  // 使用Vuex store检查登录状态
+  const token = store.state.user.token || storage.get('token')
+  
+  // 检查登录状态
+  if (token) {
+    next()
+  } else {
+    // 未登录，重定向到登录页
+    next({ path: loginRoutePath })
+    NProgress.done()
+  }
 })
 
 // 路由守卫

vue/afvue/src/store/index.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import user from './modules/user'
+import storage from 'store'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    user
+  },
+  state: {
+    // 全局状态
+  },
+  mutations: {
+    // 全局mutations
+  },
+  actions: {
+    // 全局actions
+  },
+  getters: {
+    // 全局getters
+  }
+})
+
+// 初始化时从localStorage恢复用户状态
+const token = storage.get('token')
+if (token) {
+  store.commit('user/SET_TOKEN', token)
+}
+
+export default store

vue/afvue/src/store/modules/user.js

@@ -0,0 +1,111 @@
+import storage from 'store'
+import { login } from '@/api/scinfo'
+
+const user = {
+  namespaced: true,
+  state: {
+    token: '',
+    userInfo: null,
+    isLoggedIn: false,
+    permissions: []
+  },
+  mutations: {
+    // 设置token
+    SET_TOKEN(state, token) {
+      state.token = token
+      state.isLoggedIn = !!token
+    },
+    
+    // 设置用户信息
+    SET_USER_INFO(state, userInfo) {
+      state.userInfo = userInfo
+    },
+    
+    // 设置权限列表
+    SET_PERMISSIONS(state, permissions) {
+      state.permissions = permissions
+    },
+    
+    // 登出
+    LOGOUT(state) {
+      state.token = ''
+      state.userInfo = null
+      state.isLoggedIn = false
+      state.permissions = []
+      storage.remove('token')
+    }
+  },
+  actions: {
+    // 用户登录
+    async login({ commit }, userData) {
+      try {
+        const res = await login(userData)
+        if (res && res.data && res.data.token) {
+          // 保存token到localStorage
+          storage.set('token', res.data.token)
+          // 更新store状态
+          commit('SET_TOKEN', res.data.token)
+          // 如果有用户信息，同时设置
+          if (res.data.userInfo) {
+            commit('SET_USER_INFO', res.data.userInfo)
+          }
+          // 如果有权限信息，设置权限
+          if (res.data.permissions) {
+            commit('SET_PERMISSIONS', res.data.permissions)
+          }
+          return true
+        }
+        return false
+      } catch (error) {
+        console.error('登录失败:', error)
+        throw error
+      }
+    },
+    
+    // 获取用户信息
+    async getUserInfo({ commit, state }) {
+      if (!state.token) return
+      
+      try {
+        // 这里可以调用获取用户信息的API
+        // 暂时模拟数据
+        const userInfo = {
+          username: storage.get('username') || '未知用户',
+          // 其他用户信息
+        }
+        commit('SET_USER_INFO', userInfo)
+        return userInfo
+      } catch (error) {
+        console.error('获取用户信息失败:', error)
+        // 信息获取失败，清除登录状态
+        commit('LOGOUT')
+        throw error
+      }
+    },
+    
+    // 用户登出
+    logout({ commit }) {
+      commit('LOGOUT')
+    }
+  },
+  getters: {
+    // 获取token
+    getToken: state => state.token,
+    
+    // 获取用户信息
+    getUserInfo: state => state.userInfo,
+    
+    // 判断是否登录
+    isLoggedIn: state => state.isLoggedIn,
+    
+    // 获取权限列表
+    getPermissions: state => state.permissions,
+    
+    // 判断是否有权限
+    hasPermission: state => permission => {
+      return state.permissions.includes(permission)
+    }
+  }
+}
+
+export default user

vue/afvue/src/views/Login.vue

@@ -19,10 +19,9 @@
 </template>
 
 <script>
-import { login } from '@/api/scinfo'
-import storage from 'store'
+import { mapActions } from 'vuex'
 import router from '@/router'
-import { useUserStore } from '@/stores/user'
+import storage from 'store'
 
 export default {
   name: 'Login',
@@ -35,6 +34,10 @@ export default {
     }
   },
   methods: {
+    ...mapActions({
+      loginAction: 'user/login'
+    }),
+    
     async handleLogin() {
       if (!this.username || !this.password) {
         this.error = '请输入用户名和密码'
@@ -45,24 +48,15 @@ export default {
       this.error = ''
       
       try {
-        // 调用登录API
-        const res = await login({
+        // 调用Vuex store中的登录action
+        const success = await this.loginAction({
           username: this.username,
           password: this.password
         })
         
-        if (res && res.data && res.data.token) {
-          // 保存token到localStorage
-          storage.set('token', res.data.token)
-          
-          // 使用Pinia store管理登录状态
-          const userStore = useUserStore()
-          userStore.setUser({
-            username: this.username,
-            token: res.data.token,
-            ...(res.data.userInfo || {})
-          })
-          
+        if (success) {
+          // 保存用户名到localStorage便于后续使用
+          storage.set('username', this.username)
           // 跳转到首页
           router.push('/')
         } else {