使用Pinia代替Vuex进行数据存储

master
RuoYi 2 years ago
parent 6f359c1534
commit 44ad220cdd
  1. 4
      package.json
  2. 4
      src/components/HeaderSearch/index.vue
  3. 34
      src/components/SizeSelect/index.vue
  4. 21
      src/components/TopNav/index.vue
  5. 4
      src/directive/permission/hasPermi.js
  6. 4
      src/directive/permission/hasRole.js
  7. 8
      src/layout/components/AppMain.vue
  8. 22
      src/layout/components/Navbar.vue
  9. 52
      src/layout/components/Settings/index.vue
  10. 5
      src/layout/components/Sidebar/Logo.vue
  11. 17
      src/layout/components/Sidebar/index.vue
  12. 6
      src/layout/components/TagsView/ScrollPane.vue
  13. 16
      src/layout/components/TagsView/index.vue
  14. 27
      src/layout/index.vue
  15. 14
      src/permission.js
  16. 6
      src/plugins/auth.js
  17. 20
      src/plugins/tab.js
  18. 18
      src/store/getters.js
  19. 20
      src/store/index.js
  20. 65
      src/store/modules/app.js
  21. 45
      src/store/modules/permission.js
  22. 40
      src/store/modules/settings.js
  23. 250
      src/store/modules/tagsView.js
  24. 68
      src/store/modules/user.js
  25. 6
      src/utils/dynamicTitle.js
  26. 6
      src/utils/permission.js
  27. 4
      src/utils/request.js
  28. 5
      src/views/login.vue
  29. 9
      src/views/system/user/profile/userAvatar.vue
  30. 4
      vite/plugins/auto-import.js

@ -25,10 +25,10 @@
"js-cookie": "3.0.1", "js-cookie": "3.0.1",
"jsencrypt": "3.2.1", "jsencrypt": "3.2.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pinia": "2.0.14",
"vue": "3.2.31", "vue": "3.2.31",
"vue-cropper": "1.0.3", "vue-cropper": "1.0.3",
"vue-router": "4.0.14", "vue-router": "4.0.14"
"vuex": "4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "2.3.3", "@vitejs/plugin-vue": "2.3.3",

@ -21,6 +21,7 @@
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import { getNormalPath } from '@/utils/ruoyi' import { getNormalPath } from '@/utils/ruoyi'
import { isHttp } from '@/utils/validate' import { isHttp } from '@/utils/validate'
import usePermissionStore from '@/store/modules/permission'
const search = ref(''); const search = ref('');
const options = ref([]); const options = ref([]);
@ -28,9 +29,8 @@ const searchPool = ref([]);
const show = ref(false); const show = ref(false);
const fuse = ref(undefined); const fuse = ref(undefined);
const headerSearchSelectRef = ref(null); const headerSearchSelectRef = ref(null);
const store = useStore();
const router = useRouter(); const router = useRouter();
const routes = computed(() => store.getters.permission_routes); const routes = computed(() => usePermissionStore().routes);
function click() { function click() {
show.value = !show.value show.value = !show.value

@ -16,36 +16,24 @@
</template> </template>
<script setup> <script setup>
import { ElMessage } from 'element-plus' import useAppStore from "@/store/modules/app";
const store = useStore(); const appStore = useAppStore();
const size = computed(() => store.getters.size); const size = computed(() => appStore.size);
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const {proxy} = getCurrentInstance(); const { proxy } = getCurrentInstance();
const sizeOptions = ref([ const sizeOptions = ref([
{ label: '较大', value: 'large' }, { label: "较大", value: "large" },
{ label: '默认', value: 'default' }, { label: "默认", value: "default" },
{ label: '稍小', value: 'small' }, { label: "稍小", value: "small" },
]) ]);
function refreshView() {
// In order to make the cached page re-rendered
store.dispatch('tagsView/delAllCachedViews', route)
const { fullPath } = route
nextTick(() => {
router.replace({
path: '/redirect' + fullPath
})
})
}
function handleSetSize(size) { function handleSetSize(size) {
proxy.$modal.loading("正在设置布局大小,请稍候..."); proxy.$modal.loading("正在设置布局大小,请稍候...");
store.dispatch('app/setSize', size) appStore.setSize(size);
setTimeout("window.location.reload()", 1000) setTimeout("window.location.reload()", 1000);
}; }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>

@ -30,6 +30,9 @@
<script setup> <script setup>
import { constantRoutes } from "@/router" import { constantRoutes } from "@/router"
import { isHttp } from '@/utils/validate' import { isHttp } from '@/utils/validate'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
// //
const visibleNumber = ref(null); const visibleNumber = ref(null);
@ -38,14 +41,16 @@ const currentIndex = ref(null);
// //
const hideList = ['/index', '/user/profile']; const hideList = ['/index', '/user/profile'];
const store = useStore(); const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
// //
const theme = computed(() => store.state.settings.theme); const theme = computed(() => settingsStore.theme);
// //
const routers = computed(() => store.state.permission.topbarRouters); const routers = computed(() => permissionStore.topbarRouters);
// //
const topMenus = computed(() => { const topMenus = computed(() => {
@ -91,10 +96,10 @@ const activeMenu = computed(() => {
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) { if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
const tmpPath = path.substring(1, path.length); const tmpPath = path.substring(1, path.length);
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
store.dispatch('app/toggleSideBarHide', false); appStore.toggleSideBarHide(false);
} else if(!route.children) { } else if(!route.children) {
activePath = path; activePath = path;
store.dispatch('app/toggleSideBarHide', true); appStore.toggleSideBarHide(true);
} }
activeRoutes(activePath); activeRoutes(activePath);
return activePath; return activePath;
@ -114,11 +119,11 @@ function handleSelect(key, keyPath) {
} else if (!route || !route.children) { } else if (!route || !route.children) {
// //
router.push({ path: key }); router.push({ path: key });
store.dispatch('app/toggleSideBarHide', true); appStore.toggleSideBarHide(true);
} else { } else {
// //
activeRoutes(key); activeRoutes(key);
store.dispatch('app/toggleSideBarHide', false); appStore.toggleSideBarHide(false);
} }
} }
@ -132,7 +137,7 @@ function activeRoutes(key) {
}); });
} }
if(routes.length > 0) { if(routes.length > 0) {
store.commit("SET_SIDEBAR_ROUTERS", routes); permissionStore.setSidebarRouters(routes);
} }
return routes; return routes;
} }

@ -3,13 +3,13 @@
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
import store from '@/store' import useUserStore from '@/store/modules/user'
export default { export default {
mounted(el, binding, vnode) { mounted(el, binding, vnode) {
const { value } = binding const { value } = binding
const all_permission = "*:*:*"; const all_permission = "*:*:*";
const permissions = store.getters && store.getters.permissions const permissions = useUserStore().permissions
if (value && value instanceof Array && value.length > 0) { if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value const permissionFlag = value

@ -3,13 +3,13 @@
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
import store from '@/store' import useUserStore from '@/store/modules/user'
export default { export default {
mounted(el, binding, vnode) { mounted(el, binding, vnode) {
const { value } = binding const { value } = binding
const super_admin = "admin"; const super_admin = "admin";
const roles = store.getters && store.getters.roles const roles = useUserStore().roles
if (value && value instanceof Array && value.length > 0) { if (value && value instanceof Array && value.length > 0) {
const roleFlag = value const roleFlag = value

@ -11,11 +11,13 @@
</template> </template>
<script setup> <script setup>
let store = useStore() import useTagsViewStore from '@/store/modules/tagsview'
const tagsViewStore = useTagsViewStore()
const route = useRoute() const route = useRoute()
store.dispatch('tagsView/addCachedView', route) tagsViewStore.addCachedView(route)
const cachedViews = computed(() => { const cachedViews = computed(() => {
return store.state.tagsView.cachedViews return tagsViewStore.cachedViews
}) })
</script> </script>

@ -1,11 +1,11 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" /> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" /> <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
<div class="right-menu"> <div class="right-menu">
<template v-if="getters.device !== 'mobile'"> <template v-if="appStore.device !== 'mobile'">
<header-search id="header-search" class="right-menu-item" /> <header-search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <el-tooltip content="源码地址" effect="dark" placement="bottom">
@ -25,7 +25,7 @@
<div class="avatar-container"> <div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="getters.avatar" class="user-avatar" /> <img :src="userStore.avatar" class="user-avatar" />
<el-icon><caret-bottom /></el-icon> <el-icon><caret-bottom /></el-icon>
</div> </div>
<template #dropdown> <template #dropdown>
@ -57,12 +57,16 @@ import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch' import HeaderSearch from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git' import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc' import RuoYiDoc from '@/components/RuoYi/Doc'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
const store = useStore(); const appStore = useAppStore()
const getters = computed(() => store.getters); const userStore = useUserStore()
const settingsStore = useSettingsStore()
function toggleSideBar() { function toggleSideBar() {
store.dispatch('app/toggleSideBar') appStore.toggleSideBar()
} }
function handleCommand(command) { function handleCommand(command) {
@ -84,7 +88,7 @@ function logout() {
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
store.dispatch('LogOut').then(() => { userStore.logOut().then(() => {
location.href = '/index'; location.href = '/index';
}) })
}).catch(() => { }); }).catch(() => { });

@ -84,26 +84,28 @@ import originElementPlus from 'element-plus/theme-chalk/index.css'
import axios from 'axios' import axios from 'axios'
import { ElLoading, ElMessage } from 'element-plus' import { ElLoading, ElMessage } from 'element-plus'
import { useDynamicTitle } from '@/utils/dynamicTitle' import { useDynamicTitle } from '@/utils/dynamicTitle'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const store = useStore(); const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const showSettings = ref(false); const showSettings = ref(false);
const theme = ref(store.state.settings.theme); const theme = ref(settingsStore.theme);
const sideTheme = ref(store.state.settings.sideTheme); const sideTheme = ref(settingsStore.sideTheme);
const storeSettings = computed(() => store.state.settings); const storeSettings = computed(() => settingsStore);
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]); const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
/** 是否需要topnav */ /** 是否需要topnav */
const topNav = computed({ const topNav = computed({
get: () => storeSettings.value.topNav, get: () => storeSettings.value.topNav,
set: (val) => { set: (val) => {
store.dispatch('settings/changeSetting', { settingsStore.changeSetting({ key: 'topNav', value: val })
key: 'topNav',
value: val
})
if (!val) { if (!val) {
store.dispatch('app/toggleSideBarHide', false); appStore.toggleSideBarHide(false);
store.commit("SET_SIDEBAR_ROUTERS", store.state.permission.defaultRoutes); permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
} }
} }
}) })
@ -111,57 +113,39 @@ const topNav = computed({
const tagsView = computed({ const tagsView = computed({
get: () => storeSettings.value.tagsView, get: () => storeSettings.value.tagsView,
set: (val) => { set: (val) => {
store.dispatch('settings/changeSetting', { settingsStore.changeSetting({ key: 'tagsView', value: val })
key: 'tagsView',
value: val
})
} }
}) })
/**是否需要固定头部 */ /**是否需要固定头部 */
const fixedHeader = computed({ const fixedHeader = computed({
get: () => storeSettings.value.fixedHeader, get: () => storeSettings.value.fixedHeader,
set: (val) => { set: (val) => {
store.dispatch('settings/changeSetting', { settingsStore.changeSetting({ key: 'fixedHeader', value: val })
key: 'fixedHeader',
value: val
})
} }
}) })
/**是否需要侧边栏的logo */ /**是否需要侧边栏的logo */
const sidebarLogo = computed({ const sidebarLogo = computed({
get: () => storeSettings.value.sidebarLogo, get: () => storeSettings.value.sidebarLogo,
set: (val) => { set: (val) => {
store.dispatch('settings/changeSetting', { settingsStore.changeSetting({ key: 'sidebarLogo', value: val })
key: 'sidebarLogo',
value: val
})
} }
}) })
/**是否需要侧边栏的动态网页的title */ /**是否需要侧边栏的动态网页的title */
const dynamicTitle = computed({ const dynamicTitle = computed({
get: () => storeSettings.value.dynamicTitle, get: () => storeSettings.value.dynamicTitle,
set: (val) => { set: (val) => {
store.dispatch('settings/changeSetting', { settingsStore.changeSetting({ key: 'dynamicTitle', value: val })
key: 'dynamicTitle',
value: val
})
// //
useDynamicTitle() useDynamicTitle()
} }
}) })
function themeChange(val) { function themeChange(val) {
store.dispatch('settings/changeSetting', { settingsStore.changeSetting({ key: 'theme', value: val })
key: 'theme',
value: val
})
theme.value = val; theme.value = val;
} }
function handleTheme(val) { function handleTheme(val) {
store.dispatch('settings/changeSetting', { settingsStore.changeSetting({ key: 'sideTheme', value: val })
key: 'sideTheme',
value: val
})
sideTheme.value = val; sideTheme.value = val;
} }
function saveSetting() { function saveSetting() {

@ -16,6 +16,7 @@
<script setup> <script setup>
import variables from '@/assets/styles/variables.module.scss' import variables from '@/assets/styles/variables.module.scss'
import logo from '@/assets/logo/logo.png' import logo from '@/assets/logo/logo.png'
import useSettingsStore from '@/store/modules/settings'
defineProps({ defineProps({
collapse: { collapse: {
@ -25,8 +26,8 @@ defineProps({
}) })
const title = ref('若依管理系统'); const title = ref('若依管理系统');
const store = useStore(); const settingsStore = useSettingsStore();
const sideTheme = computed(() => store.state.settings.sideTheme); const sideTheme = computed(() => settingsStore.sideTheme);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

@ -27,15 +27,20 @@
import Logo from './Logo' import Logo from './Logo'
import SidebarItem from './SidebarItem' import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss' import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const route = useRoute(); const route = useRoute();
const store = useStore(); const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const sidebarRouters = computed(() => store.getters.sidebarRouters); const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const showLogo = computed(() => store.state.settings.sidebarLogo); const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => store.state.settings.sideTheme); const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => store.state.settings.theme); const theme = computed(() => settingsStore.theme);
const isCollapse = computed(() => !store.state.app.sidebar.opened); const isCollapse = computed(() => !appStore.sidebar.opened);
const activeMenu = computed(() => { const activeMenu = computed(() => {
const { meta, path } = route; const { meta, path } = route;

@ -10,6 +10,8 @@
</template> </template>
<script setup> <script setup>
import useTagsViewStore from '@/store/modules/tagsview'
const tagAndTagSpacing = ref(4); const tagAndTagSpacing = ref(4);
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
@ -32,8 +34,8 @@ const emitScroll = () => {
emits('scroll') emits('scroll')
} }
const store = useStore(); const tagsViewStore = useTagsViewStore()
const visitedViews = computed(() => store.state.tagsView.visitedViews); const visitedViews = computed(() => tagsViewStore.visitedViews);
function moveToTarget(currentTag) { function moveToTarget(currentTag) {
const $container = proxy.$refs.scrollContainer.$el const $container = proxy.$refs.scrollContainer.$el

@ -44,6 +44,9 @@
<script setup> <script setup>
import ScrollPane from './ScrollPane' import ScrollPane from './ScrollPane'
import { getNormalPath } from '@/utils/ruoyi' import { getNormalPath } from '@/utils/ruoyi'
import useTagsViewStore from '@/store/modules/tagsview'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const visible = ref(false); const visible = ref(false);
const top = ref(0); const top = ref(0);
@ -53,13 +56,12 @@ const affixTags = ref([]);
const scrollPaneRef = ref(null); const scrollPaneRef = ref(null);
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const store = useStore();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const visitedViews = computed(() => store.state.tagsView.visitedViews); const visitedViews = computed(() => useTagsViewStore().visitedViews);
const routes = computed(() => store.state.permission.routes); const routes = computed(() => usePermissionStore().routes);
const theme = computed(() => store.state.settings.theme); const theme = computed(() => useSettingsStore().theme);
watch(route, () => { watch(route, () => {
addTags() addTags()
@ -131,14 +133,14 @@ function initTags() {
for (const tag of res) { for (const tag of res) {
// Must have tag name // Must have tag name
if (tag.name) { if (tag.name) {
store.dispatch('tagsView/addVisitedView', tag) useTagsViewStore().addVisitedView(tag)
} }
} }
} }
function addTags() { function addTags() {
const { name } = route const { name } = route
if (name) { if (name) {
store.dispatch('tagsView/addView', route) useTagsViewStore().addView(route)
} }
return false return false
} }
@ -149,7 +151,7 @@ function moveToCurrentTag() {
scrollPaneRef.value.moveToTarget(r); scrollPaneRef.value.moveToTarget(r);
// when query is different then update // when query is different then update
if (r.fullPath !== route.fullPath) { if (r.fullPath !== route.fullPath) {
store.dispatch('tagsView/updateVisitedView', route) useTagsViewStore().updateVisitedView(route)
} }
} }
} }

@ -19,13 +19,16 @@ import Sidebar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components' import { AppMain, Navbar, Settings, TagsView } from './components'
import defaultSettings from '@/settings' import defaultSettings from '@/settings'
const store = useStore(); import useAppStore from '@/store/modules/app'
const theme = computed(() => store.state.settings.theme); import useSettingsStore from '@/store/modules/settings'
const sideTheme = computed(() => store.state.settings.sideTheme);
const sidebar = computed(() => store.state.app.sidebar); const settingsStore = useSettingsStore()
const device = computed(() => store.state.app.device); const theme = computed(() => settingsStore.theme);
const needTagsView = computed(() => store.state.settings.tagsView); const sideTheme = computed(() => settingsStore.sideTheme);
const fixedHeader = computed(() => store.state.settings.fixedHeader); const sidebar = computed(() => useAppStore().sidebar);
const device = computed(() => useAppStore().device);
const needTagsView = computed(() => settingsStore.tagsView);
const fixedHeader = computed(() => settingsStore.fixedHeader);
const classObj = computed(() => ({ const classObj = computed(() => ({
hideSidebar: !sidebar.value.opened, hideSidebar: !sidebar.value.opened,
@ -39,18 +42,18 @@ const WIDTH = 992; // refer to Bootstrap's responsive design
watchEffect(() => { watchEffect(() => {
if (device.value === 'mobile' && sidebar.value.opened) { if (device.value === 'mobile' && sidebar.value.opened) {
store.dispatch('app/closeSideBar', { withoutAnimation: false }) useAppStore().closeSideBar({ withoutAnimation: false })
} }
if (width.value - 1 < WIDTH) { if (width.value - 1 < WIDTH) {
store.dispatch('app/toggleDevice', 'mobile') useAppStore().toggleDevice('mobile')
store.dispatch('app/closeSideBar', { withoutAnimation: true }) useAppStore().closeSideBar({ withoutAnimation: true })
} else { } else {
store.dispatch('app/toggleDevice', 'desktop') useAppStore().toggleDevice('desktop')
} }
}) })
function handleClickOutside() { function handleClickOutside() {
store.dispatch('app/closeSideBar', { withoutAnimation: false }) useAppStore().closeSideBar({ withoutAnimation: false })
} }
const settingRef = ref(null); const settingRef = ref(null);

@ -1,11 +1,13 @@
import router from './router' import router from './router'
import store from './store'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import NProgress from 'nprogress' import NProgress from 'nprogress'
import 'nprogress/nprogress.css' import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
import { isHttp } from '@/utils/validate' import { isHttp } from '@/utils/validate'
import { isRelogin } from '@/utils/request' import { isRelogin } from '@/utils/request'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
NProgress.configure({ showSpinner: false }); NProgress.configure({ showSpinner: false });
@ -14,18 +16,18 @@ const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() NProgress.start()
if (getToken()) { if (getToken()) {
to.meta.title && store.dispatch('settings/setTitle', to.meta.title) to.meta.title && useSettingsStore().setTitle(to.meta.title)
/* has token*/ /* has token*/
if (to.path === '/login') { if (to.path === '/login') {
next({ path: '/' }) next({ path: '/' })
NProgress.done() NProgress.done()
} else { } else {
if (store.getters.roles.length === 0) { if (useUserStore().roles.length === 0) {
isRelogin.show = true isRelogin.show = true
// 判断当前用户是否已拉取完user_info信息 // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => { useUserStore().getInfo().then(() => {
isRelogin.show = false isRelogin.show = false
store.dispatch('GenerateRoutes').then(accessRoutes => { usePermissionStore().generateRoutes().then(accessRoutes => {
// 根据roles权限生成可访问的路由表 // 根据roles权限生成可访问的路由表
accessRoutes.forEach(route => { accessRoutes.forEach(route => {
if (!isHttp(route.path)) { if (!isHttp(route.path)) {
@ -35,7 +37,7 @@ router.beforeEach((to, from, next) => {
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
}) })
}).catch(err => { }).catch(err => {
store.dispatch('LogOut').then(() => { useUserStore().logOut().then(() => {
ElMessage.error(err) ElMessage.error(err)
next({ path: '/' }) next({ path: '/' })
}) })

@ -1,8 +1,8 @@
import store from '@/store' import useUserStore from '@/store/modules/user'
function authPermission(permission) { function authPermission(permission) {
const all_permission = "*:*:*"; const all_permission = "*:*:*";
const permissions = store.getters && store.getters.permissions const permissions = useUserStore().permissions
if (permission && permission.length > 0) { if (permission && permission.length > 0) {
return permissions.some(v => { return permissions.some(v => {
return all_permission === v || v === permission return all_permission === v || v === permission
@ -14,7 +14,7 @@ function authPermission(permission) {
function authRole(role) { function authRole(role) {
const super_admin = "admin"; const super_admin = "admin";
const roles = store.getters && store.getters.roles const roles = useUserStore().roles
if (role && role.length > 0) { if (role && role.length > 0) {
return roles.some(v => { return roles.some(v => {
return super_admin === v || v === role return super_admin === v || v === role

@ -1,4 +1,4 @@
import store from '@/store' import useTagsViewStore from '@/store/modules/tagsview'
import router from '@/router' import router from '@/router'
export default { export default {
@ -14,7 +14,7 @@ export default {
} }
}); });
} }
return store.dispatch('tagsView/delCachedView', obj).then(() => { return useTagsViewStore().delCachedView(obj).then(() => {
const { path, query } = obj const { path, query } = obj
router.replace({ router.replace({
path: '/redirect' + path, path: '/redirect' + path,
@ -24,7 +24,7 @@ export default {
}, },
// 关闭当前tab页签打开新页签 // 关闭当前tab页签打开新页签
closeOpenPage(obj) { closeOpenPage(obj) {
store.dispatch("tagsView/delView", router.currentRoute.value); useTagsViewStore().delView(router.currentRoute.value);
if (obj !== undefined) { if (obj !== undefined) {
return router.push(obj); return router.push(obj);
} }
@ -32,27 +32,27 @@ export default {
// 关闭指定tab页签 // 关闭指定tab页签
closePage(obj) { closePage(obj) {
if (obj === undefined) { if (obj === undefined) {
return store.dispatch('tagsView/delView', router.currentRoute.value).then(({ lastPath }) => { return useTagsViewStore().delView(router.currentRoute.value).then(({ lastPath }) => {
return router.push(lastPath || '/index'); return router.push(lastPath || '/index');
}); });
} }
return store.dispatch('tagsView/delView', obj); return useTagsViewStore().delView(obj);
}, },
// 关闭所有tab页签 // 关闭所有tab页签
closeAllPage() { closeAllPage() {
return store.dispatch('tagsView/delAllViews'); return useTagsViewStore().delAllViews();
}, },
// 关闭左侧tab页签 // 关闭左侧tab页签
closeLeftPage(obj) { closeLeftPage(obj) {
return store.dispatch('tagsView/delLeftTags', obj || router.currentRoute.value); return useTagsViewStore().delLeftTags(obj || router.currentRoute.value);
}, },
// 关闭右侧tab页签 // 关闭右侧tab页签
closeRightPage(obj) { closeRightPage(obj) {
return store.dispatch('tagsView/delRightTags', obj || router.currentRoute.value); return useTagsViewStore().delRightTags(obj || router.currentRoute.value);
}, },
// 关闭其他tab页签 // 关闭其他tab页签
closeOtherPage(obj) { closeOtherPage(obj) {
return store.dispatch('tagsView/delOthersViews', obj || router.currentRoute.value); return useTagsViewStore().delOthersViews(obj || router.currentRoute.value);
}, },
// 打开tab页签 // 打开tab页签
openPage(url) { openPage(url) {
@ -60,6 +60,6 @@ export default {
}, },
// 修改tab页签 // 修改tab页签
updatePage(obj) { updatePage(obj) {
return store.dispatch('tagsView/updateVisitedView', obj); return useTagsViewStore().updateVisitedView(obj);
} }
} }

@ -1,18 +0,0 @@
const getters = {
sidebar: state => state.app.sidebar,
size: state => state.app.size,
device: state => state.app.device,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
introduction: state => state.user.introduction,
roles: state => state.user.roles,
permissions: state => state.user.permissions,
permission_routes: state => state.permission.routes,
topbarRouters:state => state.permission.topbarRouters,
defaultRoutes:state => state.permission.defaultRoutes,
sidebarRouters:state => state.permission.sidebarRouters,
}
export default getters

@ -1,21 +1,3 @@
import { createStore } from 'vuex' const store = createPinia()
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'
const store = createStore({
modules: {
app,
user,
tagsView,
permission,
settings
},
getters
});
export default store export default store

@ -1,6 +1,10 @@
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
const state = {
const useAppStore = defineStore(
'app',
{
state: () => ({
sidebar: { sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
withoutAnimation: false, withoutAnimation: false,
@ -8,59 +12,36 @@ const state = {
}, },
device: 'desktop', device: 'desktop',
size: Cookies.get('size') || 'default' size: Cookies.get('size') || 'default'
} }),
actions: {
const mutations = { toggleSideBar(withoutAnimation) {
TOGGLE_SIDEBAR: state => { if (this.sidebar.hide) {
if (state.sidebar.hide) {
return false; return false;
} }
state.sidebar.opened = !state.sidebar.opened this.sidebar.opened = !this.sidebar.opened
state.sidebar.withoutAnimation = false this.sidebar.withoutAnimation = withoutAnimation
if (state.sidebar.opened) { if (this.sidebar.opened) {
Cookies.set('sidebarStatus', 1) Cookies.set('sidebarStatus', 1)
} else { } else {
Cookies.set('sidebarStatus', 0) Cookies.set('sidebarStatus', 0)
} }
}, },
CLOSE_SIDEBAR: (state, withoutAnimation) => { closeSideBar(withoutAnimation) {
Cookies.set('sidebarStatus', 0) Cookies.set('sidebarStatus', 0)
state.sidebar.opened = false this.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation this.sidebar.withoutAnimation = withoutAnimation
}, },
TOGGLE_DEVICE: (state, device) => { toggleDevice(device) {
state.device = device this.device = device
}, },
SET_SIZE: (state, size) => { setSize(size) {
state.size = size this.size = size;
Cookies.set('size', size) Cookies.set('size', size)
}, },
SET_SIDEBAR_HIDE: (state, status) => { toggleSideBarHide(status) {
state.sidebar.hide = status this.sidebar.hide = status
} }
}
const actions = {
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
closeSideBar({ commit }, { withoutAnimation }) {
commit('CLOSE_SIDEBAR', withoutAnimation)
},
toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device)
},
setSize({ commit }, size) {
commit('SET_SIZE', size)
},
toggleSideBarHide({ commit }, status) {
commit('SET_SIDEBAR_HIDE', status)
} }
} })
export default { export default useAppStore
namespaced: true,
state,
mutations,
actions
}

@ -7,32 +7,31 @@ import InnerLink from '@/layout/components/InnerLink'
// 匹配views里面所有的.vue文件 // 匹配views里面所有的.vue文件
const modules = import.meta.glob('./../../views/**/*.vue') const modules = import.meta.glob('./../../views/**/*.vue')
const permission = { const usePermissionStore = defineStore(
state: { 'permission',
{
state: () => ({
routes: [], routes: [],
addRoutes: [], addRoutes: [],
defaultRoutes: [], defaultRoutes: [],
topbarRouters: [], topbarRouters: [],
sidebarRouters: [] sidebarRouters: []
}),
actions: {
setRoutes(routes) {
this.addRoutes = routes
this.routes = constantRoutes.concat(routes)
}, },
mutations: { setDefaultRoutes(routes) {
SET_ROUTES: (state, routes) => { this.defaultRoutes = constantRoutes.concat(routes)
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
},
SET_DEFAULT_ROUTES: (state, routes) => {
state.defaultRoutes = constantRoutes.concat(routes)
},
SET_TOPBAR_ROUTES: (state, routes) => {
state.topbarRouters = routes
}, },
SET_SIDEBAR_ROUTERS: (state, routes) => { setTopbarRoutes(routes) {
state.sidebarRouters = routes this.topbarRouters = routes
}, },
setSidebarRouters(routes) {
this.sidebarRouters = routes
}, },
actions: { generateRoutes(roles) {
// 生成路由
GenerateRoutes({ commit }) {
return new Promise(resolve => { return new Promise(resolve => {
// 向后端请求路由数据 // 向后端请求路由数据
getRouters().then(res => { getRouters().then(res => {
@ -42,16 +41,16 @@ const permission = {
const sidebarRoutes = filterAsyncRouter(sdata) const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true) const rewriteRoutes = filterAsyncRouter(rdata, false, true)
const defaultRoutes = filterAsyncRouter(defaultData) const defaultRoutes = filterAsyncRouter(defaultData)
commit('SET_ROUTES', rewriteRoutes) this.setRoutes(rewriteRoutes)
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes)) this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
commit('SET_DEFAULT_ROUTES', sidebarRoutes) this.setDefaultRoutes(sidebarRoutes)
commit('SET_TOPBAR_ROUTES', defaultRoutes) this.setTopbarRoutes(defaultRoutes)
resolve(rewriteRoutes) resolve(rewriteRoutes)
}) })
}) })
} }
} }
} })
// 遍历后台传来的路由字符串,转换为组件对象 // 遍历后台传来的路由字符串,转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) { function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
@ -116,4 +115,4 @@ export const loadView = (view) => {
return res; return res;
} }
export default permission export default usePermissionStore

@ -4,7 +4,11 @@ import { useDynamicTitle } from '@/utils/dynamicTitle'
const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
const state = {
const useSettingsStore = defineStore(
'settings',
{
state: () => ({
title: '', title: '',
theme: storageSetting.theme || '#409EFF', theme: storageSetting.theme || '#409EFF',
sideTheme: storageSetting.sideTheme || sideTheme, sideTheme: storageSetting.sideTheme || sideTheme,
@ -14,31 +18,21 @@ const state = {
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader, fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo, sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
} }),
const mutations = { actions: {
CHANGE_SETTING: (state, { key, value }) => {
if (state.hasOwnProperty(key)) {
state[key] = value
}
}
}
const actions = {
// 修改布局设置 // 修改布局设置
changeSetting({ commit }, data) { changeSetting(data) {
commit('CHANGE_SETTING', data) const { key, value } = data
if (this.hasOwnProperty(key)) {
this[key] = value
}
}, },
// 设置网页标题 // 设置网页标题
setTitle({ commit }, title) { setTitle(title) {
state.title = title this.title = title
useDynamicTitle(); useDynamicTitle();
} }
} }
})
export default {
namespaced: true,
state,
mutations,
actions
}
export default useSettingsStore

@ -1,207 +1,153 @@
const state = { const useTagsViewStore = defineStore(
'tags-view',
{
state: () => ({
visitedViews: [], visitedViews: [],
cachedViews: [] cachedViews: []
} }),
actions: {
const mutations = { addView(view) {
ADD_VISITED_VIEW: (state, view) => { this.addVisitedView(view)
if (state.visitedViews.some(v => v.path === view.path)) return this.addCachedView(view)
state.visitedViews.push( },
addVisitedView(view) {
if (this.visitedViews.some(v => v.path === view.path)) return
this.visitedViews.push(
Object.assign({}, view, { Object.assign({}, view, {
title: view.meta.title || 'no-name' title: view.meta.title || 'no-name'
}) })
) )
}, },
ADD_CACHED_VIEW: (state, view) => { addCachedView(view) {
if (state.cachedViews.includes(view.name)) return if (this.cachedViews.includes(view.name)) return
if (!view.meta.noCache) { if (!view.meta.noCache) {
state.cachedViews.push(view.name) this.cachedViews.push(view.name)
} }
}, },
delView(view) {
DEL_VISITED_VIEW: (state, view) => { return new Promise(resolve => {
for (const [i, v] of state.visitedViews.entries()) { this.delVisitedView(view)
this.delCachedView(view)
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
},
delVisitedView(view) {
return new Promise(resolve => {
for (const [i, v] of this.visitedViews.entries()) {
if (v.path === view.path) { if (v.path === view.path) {
state.visitedViews.splice(i, 1) this.visitedViews.splice(i, 1)
break break
} }
} }
resolve([...this.visitedViews])
})
},
delCachedView(view) {
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
index > -1 && this.cachedViews.splice(index, 1)
resolve([...this.cachedViews])
})
}, },
DEL_CACHED_VIEW: (state, view) => { delOthersViews(view) {
const index = state.cachedViews.indexOf(view.name) return new Promise(resolve => {
index > -1 && state.cachedViews.splice(index, 1) this.delOthersVisitedViews(view)
this.delOthersCachedViews(view)
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
}, },
delOthersVisitedViews(view) {
DEL_OTHERS_VISITED_VIEWS: (state, view) => { return new Promise(resolve => {
state.visitedViews = state.visitedViews.filter(v => { this.visitedViews = this.visitedViews.filter(v => {
return v.meta.affix || v.path === view.path return v.meta.affix || v.path === view.path
}) })
resolve([...this.visitedViews])
})
}, },
DEL_OTHERS_CACHED_VIEWS: (state, view) => { delOthersCachedViews(view) {
const index = state.cachedViews.indexOf(view.name) return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
if (index > -1) { if (index > -1) {
state.cachedViews = state.cachedViews.slice(index, index + 1) this.cachedViews = this.cachedViews.slice(index, index + 1)
} else { } else {
state.cachedViews = [] this.cachedViews = []
} }
resolve([...this.cachedViews])
})
}, },
delAllViews(view) {
DEL_ALL_VISITED_VIEWS: state => { return new Promise(resolve => {
// keep affix tags this.delAllVisitedViews(view)
const affixTags = state.visitedViews.filter(tag => tag.meta.affix) this.delAllCachedViews(view)
state.visitedViews = affixTags resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
}, },
DEL_ALL_CACHED_VIEWS: state => { delAllVisitedViews(view) {
state.cachedViews = [] return new Promise(resolve => {
const affixTags = this.visitedViews.filter(tag => tag.meta.affix)
this.visitedViews = affixTags
resolve([...this.visitedViews])
})
}, },
delAllCachedViews(view) {
UPDATE_VISITED_VIEW: (state, view) => { return new Promise(resolve => {
for (let v of state.visitedViews) { this.cachedViews = []
resolve([...this.cachedViews])
})
},
updateVisitedView(view) {
for (let v of this.visitedViews) {
if (v.path === view.path) { if (v.path === view.path) {
v = Object.assign(v, view) v = Object.assign(v, view)
break break
} }
} }
}, },
delRightTags(view) {
DEL_RIGHT_VIEWS: (state, view) => { return new Promise(resolve => {
const index = state.visitedViews.findIndex(v => v.path === view.path) const index = this.visitedViews.findIndex(v => v.path === view.path)
if (index === -1) { if (index === -1) {
return return
} }
state.visitedViews = state.visitedViews.filter((item, idx) => { this.visitedViews = this.visitedViews.filter((item, idx) => {
if (idx <= index || (item.meta && item.meta.affix)) { if (idx <= index || (item.meta && item.meta.affix)) {
return true return true
} }
const i = state.cachedViews.indexOf(item.name) const i = this.cachedViews.indexOf(item.name)
if (i > -1) { if (i > -1) {
state.cachedViews.splice(i, 1) this.cachedViews.splice(i, 1)
} }
return false return false
}) })
resolve([...this.visitedViews])
})
}, },
delLeftTags(view) {
DEL_LEFT_VIEWS: (state, view) => { const index = this.visitedViews.findIndex(v => v.path === view.path)
const index = state.visitedViews.findIndex(v => v.path === view.path)
if (index === -1) { if (index === -1) {
return return
} }
state.visitedViews = state.visitedViews.filter((item, idx) => { this.visitedViews = this.visitedViews.filter((item, idx) => {
if (idx >= index || (item.meta && item.meta.affix)) { if (idx >= index || (item.meta && item.meta.affix)) {
return true return true
} }
const i = state.cachedViews.indexOf(item.name) const i = this.cachedViews.indexOf(item.name)
if (i > -1) { if (i > -1) {
state.cachedViews.splice(i, 1) this.cachedViews.splice(i, 1)
} }
return false return false
}) })
} }
} }
const actions = {
addView({ dispatch }, view) {
dispatch('addVisitedView', view)
dispatch('addCachedView', view)
},
addVisitedView({ commit }, view) {
commit('ADD_VISITED_VIEW', view)
},
addCachedView({ commit }, view) {
commit('ADD_CACHED_VIEW', view)
},
delView({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delVisitedView', view)
dispatch('delCachedView', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delVisitedView({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_VISITED_VIEW', view)
resolve([...state.visitedViews])
})
},
delCachedView({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_CACHED_VIEW', view)
resolve([...state.cachedViews])
})
},
delOthersViews({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delOthersVisitedViews', view)
dispatch('delOthersCachedViews', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delOthersVisitedViews({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_OTHERS_VISITED_VIEWS', view)
resolve([...state.visitedViews])
})
},
delOthersCachedViews({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_OTHERS_CACHED_VIEWS', view)
resolve([...state.cachedViews])
})
},
delAllViews({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delAllVisitedViews', view)
dispatch('delAllCachedViews', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delAllVisitedViews({ commit, state }) {
return new Promise(resolve => {
commit('DEL_ALL_VISITED_VIEWS')
resolve([...state.visitedViews])
})
},
delAllCachedViews({ commit, state }) {
return new Promise(resolve => {
commit('DEL_ALL_CACHED_VIEWS')
resolve([...state.cachedViews])
})
},
updateVisitedView({ commit }, view) {
commit('UPDATE_VISITED_VIEW', view)
},
delRightTags({ commit }, view) {
return new Promise(resolve => {
commit('DEL_RIGHT_VIEWS', view)
resolve([...state.visitedViews])
})
},
delLeftTags({ commit }, view) {
return new Promise(resolve => {
commit('DEL_LEFT_VIEWS', view)
resolve([...state.visitedViews])
}) })
},
}
export default { export default useTagsViewStore
namespaced: true,
state,
mutations,
actions
}

@ -2,36 +2,19 @@ import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth' import { getToken, setToken, removeToken } from '@/utils/auth'
import defAva from '@/assets/images/profile.jpg' import defAva from '@/assets/images/profile.jpg'
const user = { const useUserStore = defineStore(
state: { 'user',
{
state: () => ({
token: getToken(), token: getToken(),
name: '', name: '',
avatar: '', avatar: '',
roles: [], roles: [],
permissions: [] permissions: []
}, }),
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
}
},
actions: { actions: {
// 登录 // 登录
Login({ commit }, userInfo) { login(userInfo) {
const username = userInfo.username.trim() const username = userInfo.username.trim()
const password = userInfo.password const password = userInfo.password
const code = userInfo.code const code = userInfo.code
@ -39,60 +22,49 @@ const user = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => { login(username, password, code, uuid).then(res => {
setToken(res.token) setToken(res.token)
commit('SET_TOKEN', res.token) this.token = res.token
resolve() resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
}) })
}) })
}, },
// 获取用户信息 // 获取用户信息
GetInfo({ commit, state }) { getInfo() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getInfo().then(res => { getInfo().then(res => {
const user = res.user const user = res.user
const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar; const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组 if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', res.roles) this.roles = res.roles
commit('SET_PERMISSIONS', res.permissions) this.permissions = res.permissions
} else { } else {
commit('SET_ROLES', ['ROLE_DEFAULT']) this.setRoutes = ['ROLE_DEFAULT']
} }
commit('SET_NAME', user.userName) this.name = user.userName
commit('SET_AVATAR', avatar) this.avatar = avatar;
resolve(res) resolve(res)
}).catch(error => { }).catch(error => {
reject(error) reject(error)
}) })
}) })
}, },
// 退出系统 // 退出系统
LogOut({ commit, state }) { logOut() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
logout(state.token).then(() => { logout(this.token).then(() => {
commit('SET_TOKEN', '') this.token = ''
commit('SET_ROLES', []) this.roles = []
commit('SET_PERMISSIONS', []) this.permissions = []
removeToken() removeToken()
resolve() resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
}) })
}) })
},
// 前端 登出
FedLogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
} }
} }
} })
export default user export default useUserStore

@ -1,12 +1,14 @@
import store from '@/store' import store from '@/store'
import defaultSettings from '@/settings' import defaultSettings from '@/settings'
import useSettingsStore from '@/store/modules/settings'
/** /**
* 动态修改标题 * 动态修改标题
*/ */
export function useDynamicTitle() { export function useDynamicTitle() {
if (store.state.settings.dynamicTitle) { const settingsStore = useSettingsStore();
document.title = store.state.settings.title + ' - ' + defaultSettings.title; if (settingsStore.dynamicTitle) {
document.title = settingsStore.title + ' - ' + defaultSettings.title;
} else { } else {
document.title = defaultSettings.title; document.title = defaultSettings.title;
} }

@ -1,4 +1,4 @@
import store from '@/store' import useUserStore from '@/store/modules/user'
/** /**
* 字符权限校验 * 字符权限校验
@ -7,7 +7,7 @@ import store from '@/store'
*/ */
export function checkPermi(value) { export function checkPermi(value) {
if (value && value instanceof Array && value.length > 0) { if (value && value instanceof Array && value.length > 0) {
const permissions = store.getters && store.getters.permissions const permissions = useUserStore().permissions
const permissionDatas = value const permissionDatas = value
const all_permission = "*:*:*"; const all_permission = "*:*:*";
@ -32,7 +32,7 @@ export function checkPermi(value) {
*/ */
export function checkRole(value) { export function checkRole(value) {
if (value && value instanceof Array && value.length > 0) { if (value && value instanceof Array && value.length > 0) {
const roles = store.getters && store.getters.roles const roles = useUserStore().roles
const permissionRoles = value const permissionRoles = value
const super_admin = "admin"; const super_admin = "admin";

@ -1,11 +1,11 @@
import axios from 'axios' import axios from 'axios'
import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus' import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import store from '@/store'
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode' import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from '@/utils/ruoyi' import { tansParams, blobValidate } from '@/utils/ruoyi'
import cache from '@/plugins/cache' import cache from '@/plugins/cache'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import useUserStore from '@/store/modules/user'
let downloadLoadingInstance; let downloadLoadingInstance;
// 是否显示重新登录 // 是否显示重新登录
@ -85,7 +85,7 @@ service.interceptors.response.use(res => {
} }
).then(() => { ).then(() => {
isRelogin.show = false; isRelogin.show = false;
store.dispatch('LogOut').then(() => { useUserStore().logOut().then(() => {
location.href = '/index'; location.href = '/index';
}) })
}).catch(() => { }).catch(() => {

@ -68,8 +68,9 @@
import { getCodeImg } from "@/api/login"; import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt"; import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
const store = useStore(); const userStore = useUserStore()
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
@ -111,7 +112,7 @@ function handleLogin() {
Cookies.remove("rememberMe"); Cookies.remove("rememberMe");
} }
// action // action
store.dispatch("Login", loginForm.value).then(() => { userStore.login(loginForm.value).then(() => {
router.push({ path: redirect.value || "/" }); router.push({ path: redirect.value || "/" });
}).catch(() => { }).catch(() => {
loading.value = false; loading.value = false;

@ -54,8 +54,9 @@
import "vue-cropper/dist/index.css"; import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper"; import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user"; import { uploadAvatar } from "@/api/system/user";
import useUserStore from '@/store/modules/user'
const store = useStore(); const userStore = useUserStore()
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const open = ref(false); const open = ref(false);
@ -64,7 +65,7 @@ const title = ref("修改头像");
// //
const options = reactive({ const options = reactive({
img: store.getters.avatar, // img: userStore.avatar, //
autoCrop: true, // autoCrop: true, //
autoCropWidth: 200, // autoCropWidth: 200, //
autoCropHeight: 200, // autoCropHeight: 200, //
@ -116,7 +117,7 @@ function uploadImg() {
uploadAvatar(formData).then(response => { uploadAvatar(formData).then(response => {
open.value = false; open.value = false;
options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl; options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl;
store.commit("SET_AVATAR", options.img); userStore.avatar = options.img;
proxy.$modal.msgSuccess("修改成功"); proxy.$modal.msgSuccess("修改成功");
visible.value = false; visible.value = false;
}); });
@ -128,7 +129,7 @@ function realTime(data) {
}; };
/** 关闭窗口 */ /** 关闭窗口 */
function closeDialog() { function closeDialog() {
options.img = store.getters.avatar; options.img = userStore.avatar;
options.visible = false; options.visible = false;
}; };
</script> </script>

@ -5,9 +5,7 @@ export default function createAutoImport() {
imports: [ imports: [
'vue', 'vue',
'vue-router', 'vue-router',
{ 'pinia'
'vuex': ['useStore']
}
], ],
dts: false dts: false
}) })

Loading…
Cancel
Save