diff --git a/vue/afvue/src/main.js b/vue/afvue/src/main.js index b49032d..a970f00 100644 --- a/vue/afvue/src/main.js +++ b/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') diff --git a/vue/afvue/src/permission.js b/vue/afvue/src/permission.js index ba29c34..a41f10d 100644 --- a/vue/afvue/src/permission.js +++ b/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() + } }) // 路由守卫 diff --git a/vue/afvue/src/store/index.js b/vue/afvue/src/store/index.js new file mode 100644 index 0000000..f6f9fe1 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/vue/afvue/src/store/modules/user.js b/vue/afvue/src/store/modules/user.js new file mode 100644 index 0000000..847a4f6 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/vue/afvue/src/views/Login.vue b/vue/afvue/src/views/Login.vue index 67f9a35..379c35d 100644 --- a/vue/afvue/src/views/Login.vue +++ b/vue/afvue/src/views/Login.vue @@ -19,10 +19,9 @@