refactor(store): 重构应用状态管理

- 将 app 和 user 模块的状态持久化从 sessionStorage 改为 localStorage
- 移除 auth.js 中的 Cookie 操作,改为使用 Vuex store
- 更新 getters、actions 和 mutations 以适应新的状态管理方式
-调整 logo、path 等工具类中的数据存储逻辑
- 修改请求拦截器中的 token 设置方式
This commit is contained in:
jmal 2025-05-22 16:23:11 +08:00
parent def713b195
commit 3dd67a1e1c
13 changed files with 38 additions and 143 deletions

View File

@ -143,6 +143,9 @@ export default {
}) })
}, },
loadHistoryPathList(pathname) { loadHistoryPathList(pathname) {
if (!this.$store.getters.token) {
return
}
historyApi.fileHistoryPathList({path: encodeURI(pathname), username: this.$store.state.user.name, pageIndex: this.historyPageIndex, pageSize: this.historyPageSize}).then((res) => { historyApi.fileHistoryPathList({path: encodeURI(pathname), username: this.$store.state.user.name, pageIndex: this.historyPageIndex, pageSize: this.historyPageSize}).then((res) => {
this.fileHistoryList = res.data this.fileHistoryList = res.data
this.$emit('loadHistoryPathListSuccess', {res: res, pathname: pathname}) this.$emit('loadHistoryPathListSuccess', {res: res, pathname: pathname})

View File

@ -18,7 +18,6 @@
<script> <script>
import { Navbar, Sidebar, AppMain } from './components' import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler' import ResizeMixin from './mixin/ResizeHandler'
import { getToken } from '@/utils/auth'
import AudioPreview from "@/components/preview/AudioPreview"; import AudioPreview from "@/components/preview/AudioPreview";
import globalUploader from '@/components/SimpleUploader/globalUploader.vue' import globalUploader from '@/components/SimpleUploader/globalUploader.vue'
import { initiateSSE } from '@/sse/SSEClient' import { initiateSSE } from '@/sse/SSEClient'
@ -59,7 +58,7 @@ export default {
}, },
mounted() { mounted() {
window.pc = !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent); window.pc = !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
if(getToken()){ if(this.$store.getters.token){
this.isShow = window.pc; this.isShow = window.pc;
// 与服务器建立sse连接 // 与服务器建立sse连接
initiateSSE(this.$store.state.user.name) initiateSSE(this.$store.state.user.name)

View File

@ -1,5 +1,5 @@
import 'normalize.css/normalize.css' // A modern alternative to CSS resets import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import { setFavicon } from '@/utils/logo'
import '@/utils/common' import '@/utils/common'
import '@/utils/web' import '@/utils/web'
@ -13,6 +13,8 @@ import router from './router'
import VueI18n from 'vue-i18n'; import VueI18n from 'vue-i18n';
import { loadLocaleMessages, getBrowserLocale } from '@/utils/loadLocaleMessages'; import { loadLocaleMessages, getBrowserLocale } from '@/utils/loadLocaleMessages';
setFavicon()
// ant-design-vue // ant-design-vue
import { Affix } from 'ant-design-vue'; import { Affix } from 'ant-design-vue';
Vue.use(Affix) Vue.use(Affix)

View File

@ -2,7 +2,6 @@ import router from './router'
import store from './store' import store from './store'
import NProgress from 'nprogress' // 进度条 import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 进度条样式 import 'nprogress/nprogress.css' // 进度条样式
import { getToken } from '@/utils/auth' // 认证获取token
import getPageTitle from '@/utils/get-page-title' import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress配置 NProgress.configure({ showSpinner: false }) // NProgress配置
@ -16,7 +15,7 @@ router.beforeEach(async(to, from, next) => {
document.title = getPageTitle(to.meta.title) document.title = getPageTitle(to.meta.title)
// 确认用户是否已登录 // 确认用户是否已登录
const hasToken = getToken() const hasToken = store.getters.token
if (hasToken) { if (hasToken) {
// 已登录的情况 // 已登录的情况

View File

@ -4,6 +4,7 @@ const getters = {
lang: state => state.app.lang, lang: state => state.app.lang,
token: state => state.user.token, token: state => state.user.token,
shareToken: state => state.user.shareToken, shareToken: state => state.user.shareToken,
shareId: state => state.user.shareId,
avatar: state => state.user.avatar, avatar: state => state.user.avatar,
name: state => state.user.name, name: state => state.user.name,
showName: state => state.user.showName, showName: state => state.user.showName,

View File

@ -1,9 +1,8 @@
import { getConsumerId, getShareToken, getToken, getUsername } from '@/utils/auth'
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
const getDefaultState = () => { const getDefaultState = () => {
const app = sessionStorage.getItem('app') && JSON.parse(sessionStorage.getItem('app')) const app = localStorage.getItem('app') && JSON.parse(localStorage.getItem('app'))
return { return {
sidebar: { sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
@ -40,7 +39,7 @@ const mutations = {
} }
function setStorage() { function setStorage() {
sessionStorage.setItem('app', JSON.stringify(state)) localStorage.setItem('app', JSON.stringify(state))
} }
const actions = { const actions = {

View File

@ -1,17 +1,6 @@
import { login, logout, getInfo } from '@/api/user' import { login, logout, getInfo } from '@/api/user'
import fileApi from '@/api/file-api' import fileApi from '@/api/file-api'
import menuApi from '@/api/menu' import menuApi from '@/api/menu'
import {
getToken,
getConsumerId,
removeToken,
removeConsumerId,
removeRememberName,
setShareToken,
getShareToken,
removeShareToken,
getUsername,
} from '@/utils/auth'
import { setLogo } from '@/utils/logo' import { setLogo } from '@/utils/logo'
import { resetRouter } from '@/router' import { resetRouter } from '@/router'
import router from '@/router' import router from '@/router'
@ -19,15 +8,16 @@ import Layout from '@/layout'
import ParentView from '@/components/ParentView' import ParentView from '@/components/ParentView'
const getDefaultState = () => { const getDefaultState = () => {
const store = sessionStorage.getItem('store') && JSON.parse(sessionStorage.getItem('store')) const store = localStorage.getItem('store') && JSON.parse(localStorage.getItem('store'))
return { return {
token: getToken(), token: store ? store.token : '',
shareToken: getShareToken(), shareToken: store ? store.shareToken : '',
name: getUsername(), shareId: store ? store.shareId : '',
name: store ? store.name : '',
showName: store ? store.showName : '', showName: store ? store.showName : '',
userInfo: {}, userInfo: {},
avatar: store ? store.avatar : '', avatar: store ? store.avatar : '',
userId: getConsumerId(), userId: store ? store.userId : '',
menuList: [], menuList: [],
netdiskName: store ? store.netdiskName : '', netdiskName: store ? store.netdiskName : '',
netdiskLogo: store ? store.netdiskLogo : '', netdiskLogo: store ? store.netdiskLogo : '',
@ -48,6 +38,9 @@ const mutations = {
SET_SHARE_TOKEN: (state, token) => { SET_SHARE_TOKEN: (state, token) => {
state.shareToken = token state.shareToken = token
}, },
SET_SHARE_ID: (state, shareId) => {
state.shareId = shareId
},
SET_NAME: (state, name) => { SET_NAME: (state, name) => {
state.name = name state.name = name
}, },
@ -93,8 +86,7 @@ const actions = {
localStorage.removeItem('taskProgressRole') localStorage.removeItem('taskProgressRole')
} }
state.menuList = getMenuTree(res.data); commit('SET_MENU_LIST', getMenuTree(res.data));
commit('SET_MENU_LIST', state.menuList);
resetRouter(state.menuList) resetRouter(state.menuList)
router.options.routes = router.options.routes.concat(state.menuList); router.options.routes = router.options.routes.concat(state.menuList);
resolve(res) resolve(res)
@ -110,12 +102,9 @@ const actions = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password, rememberMe: rememberMe }).then(response => { login({ username: username.trim(), password: password, rememberMe: rememberMe }).then(response => {
const { data } = response const { data } = response
commit('SET_TOKEN', data.jmalToken) commit('SET_TOKEN', data['jmal-token'])
commit('SET_NAME', username.trim()) commit('SET_NAME', username.trim())
commit('SET_USERID', data.userId) commit('SET_USERID', data.userId)
if(!rememberMe){
removeRememberName()
}
resolve() resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
@ -128,7 +117,7 @@ const actions = {
fileApi.validShareCode({ shareId: shareId, shareCode: shareCode }).then(response => { fileApi.validShareCode({ shareId: shareId, shareCode: shareCode }).then(response => {
const { data } = response const { data } = response
commit('SET_SHARE_TOKEN', data) commit('SET_SHARE_TOKEN', data)
setShareToken(data, shareId) commit('SET_SHARE_ID', shareId)
resolve() resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
@ -141,7 +130,7 @@ const actions = {
commit('SET_NETDISK_NAME', netdiskName) commit('SET_NETDISK_NAME', netdiskName)
commit('SET_NETDISK_LOGO', netdiskLogo) commit('SET_NETDISK_LOGO', netdiskLogo)
setLogo(netdiskName, netdiskLogo) setLogo(netdiskName, netdiskLogo)
sessionStorage.setItem('store', JSON.stringify(state)) localStorage.setItem('store', JSON.stringify(state))
}, },
// get user info // get user info
@ -173,7 +162,7 @@ const actions = {
commit('SET_NEW_VERSION', '') commit('SET_NEW_VERSION', '')
} }
setLogo(netdiskName, netdiskLogo) setLogo(netdiskName, netdiskLogo)
sessionStorage.setItem('store', JSON.stringify(state)) localStorage.setItem('store', JSON.stringify(state))
resolve(data) resolve(data)
}).catch(error => { }).catch(error => {
reject(error) reject(error)
@ -186,9 +175,6 @@ const actions = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
logout(state.token).then(() => { logout(state.token).then(() => {
localStorage.clear() localStorage.clear()
removeToken()
removeConsumerId()
removeRememberName()
resetRouter() resetRouter()
commit('RESET_STATE') commit('RESET_STATE')
resolve() resolve()
@ -201,8 +187,7 @@ const actions = {
// remove token // remove token
resetToken({ commit }) { resetToken({ commit }) {
return new Promise(resolve => { return new Promise(resolve => {
removeToken() // must remove token first localStorage.clear()
removeConsumerId()
commit('RESET_STATE') commit('RESET_STATE')
resolve() resolve()
}) })
@ -216,8 +201,8 @@ const actions = {
// remove share token // remove share token
resetShareToken({ commit }) { resetShareToken({ commit }) {
return new Promise(resolve => { return new Promise(resolve => {
removeShareToken()
commit('SET_SHARE_TOKEN', undefined) commit('SET_SHARE_TOKEN', undefined)
commit('SET_SHARE_ID', undefined)
resolve() resolve()
}) })
} }

View File

@ -1,55 +0,0 @@
import Cookies from 'js-cookie'
const tokenKey = 'jmal-token'
const usernameKey = 'username'
const shareTokenKey = 'share-token'
const shareIdKey = 'shareId'
const consumerId = 'consumerId'
const rememberName = 'rememberName'
export function getRememberName() {
return Cookies.get(rememberName)
}
export function removeRememberName() {
return Cookies.remove(rememberName)
}
export function getToken() {
return Cookies.get(tokenKey)
}
export function getUsername() {
return Cookies.get(usernameKey)
}
export function getShareToken() {
return Cookies.get(shareTokenKey)
}
export function getShareId() {
return Cookies.get(shareIdKey)
}
export function setShareToken(token, shareId) {
Cookies.set(shareTokenKey, token)
Cookies.set(shareIdKey, shareId)
}
export function removeToken() {
Cookies.remove(tokenKey)
Cookies.remove(usernameKey)
}
export function removeShareToken() {
Cookies.remove(shareTokenKey)
Cookies.remove(shareIdKey)
}
export function getConsumerId() {
return Cookies.get(consumerId)
}
export function removeConsumerId() {
return Cookies.remove(consumerId)
}

View File

@ -1,4 +1,3 @@
import Cookies from 'js-cookie'
import fileConfig from "@/utils/file-config"; import fileConfig from "@/utils/file-config";
const titleKey = 'netdisk-name' const titleKey = 'netdisk-name'
@ -6,22 +5,22 @@ const titleKey = 'netdisk-name'
const logoKey = 'netdisk-logo' const logoKey = 'netdisk-logo'
export function getLogoName() { export function getLogoName() {
return Cookies.get(titleKey) return localStorage.getItem(titleKey)
} }
export function getLogo() { export function getLogo() {
return Cookies.get(logoKey) return localStorage.getItem(logoKey)
} }
export function setLogo(logoName, logo) { export function setLogo(logoName, logo) {
Cookies.set(titleKey, logoName) localStorage.setItem(titleKey, logoName)
Cookies.set(logoKey, logo) localStorage.setItem(logoKey, logo)
setFavicon() setFavicon()
} }
export function removeLogo() { export function removeLogo() {
Cookies.remove(titleKey) localStorage.removeItem(titleKey)
return Cookies.remove(logoKey) localStorage.removeItem(logoKey)
} }
export function setFavicon() { export function setFavicon() {

View File

@ -1,32 +1,3 @@
import Cookies from 'js-cookie'
const pathKey = 'user-select-path'
const pathListKey = 'user-select-path-list'
export function getPath() {
const res = Cookies.get(pathKey)
if (!res || res === 'undefined') {
return ''
} else {
return res
}
}
export function getPathList() {
return Cookies.get(pathListKey)
}
export function setPath(path, pathList) {
Cookies.set(pathListKey, pathList)
return Cookies.set(pathKey, path)
}
export function removePath() {
Cookies.remove(pathListKey)
return Cookies.remove(pathKey)
}
function isEncoded(str) { function isEncoded(str) {
return /%[0-9A-Fa-f]{2}/.test(str); return /%[0-9A-Fa-f]{2}/.test(str);
} }

View File

@ -1,7 +1,6 @@
// import { MessageBox, Message } from 'element-ui' // import { MessageBox, Message } from 'element-ui'
import store from '@/store' import store from '@/store'
import _ from "lodash"; import _ from "lodash";
import {getShareId, getShareToken, getToken, getUsername} from '@/utils/auth'
import { getBrowserLanguage } from '@/utils/loadLocaleMessages'; import { getBrowserLanguage } from '@/utils/loadLocaleMessages';
// create an axios instance // create an axios instance
@ -16,14 +15,14 @@ service.interceptors.request.use(
config => { config => {
// do something before request is sent // do something before request is sent
if (store.getters.token) { if (store.getters.token) {
config.headers['jmal-token'] = getToken() config.headers['jmal-token'] = store.getters.token
} }
if (store.getters.name) { if (store.getters.name) {
config.headers['name'] = getUsername() config.headers['name'] = store.getters.name
} }
if (store.getters.shareToken) { if (store.getters.shareToken) {
config.headers['share-token'] = getShareToken() config.headers['share-token'] = store.getters.shareToken
config.headers['shareId'] = getShareId() config.headers['shareId'] = store.getters.shareToken
} }
// add i18n // add i18n
config.headers['lang'] = store.getters.lang || getBrowserLanguage() config.headers['lang'] = store.getters.lang || getBrowserLanguage()
@ -71,7 +70,7 @@ service.interceptors.response.use(
} else if (res.code === 5) { } else if (res.code === 5) {
// to re-login // to re-login
setTimeout(function () { setTimeout(function () {
const hasToken = getToken() const hasToken = store.getters.token
if (hasToken) { if (hasToken) {
Vue.prototype.$confirm('登录已失效,请重新登录', '确认登出', { Vue.prototype.$confirm('登录已失效,请重新登录', '确认登出', {
confirmButtonText: '重新登录', confirmButtonText: '重新登录',

View File

@ -100,7 +100,6 @@
<script> <script>
import { getWebstieRecord } from "@/api/setting-api"; import { getWebstieRecord } from "@/api/setting-api";
import { hasUser, initialization } from '@/api/user' import { hasUser, initialization } from '@/api/user'
import { getRememberName } from '@/utils/auth'
import Logo from "@/components/Logo"; import Logo from "@/components/Logo";
export default { export default {
@ -180,11 +179,6 @@ export default {
} }
}) })
let rememberName = getRememberName()
if(rememberName){
this.loginForm.username = rememberName
this.loginForm.rememberMe = true
}
getWebstieRecord().then((res) => { getWebstieRecord().then((res) => {
this.webstieRecord = res.data this.webstieRecord = res.data
if (this.webstieRecord.netdiskName || this.webstieRecord.netdiskLogo) { if (this.webstieRecord.netdiskName || this.webstieRecord.netdiskLogo) {

View File

@ -1088,7 +1088,6 @@ export default {
this.accessShareOpenDir(row.id) this.accessShareOpenDir(row.id)
} else { } else {
const fileHandler = fileConfig.hasIframePreview(row.suffix, this.iframePreviewConfig) const fileHandler = fileConfig.hasIframePreview(row.suffix, this.iframePreviewConfig)
console.log(fileHandler, this.iframePreviewConfig)
if (fileHandler !== null) { if (fileHandler !== null) {
// iframe 预览 // iframe 预览
this.iframePreviewVisible = true this.iframePreviewVisible = true