tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of gitee.com:youlaitech/vue3-element-admin

Browse Source
This commit is contained in:
有来技术
2021-12-26 12:57:09 +08:00
parent 811a1ee652 a4d5a563ff
commit dd0f0465ab
19 changed files with 288 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/system/role.ts
View File

@@ -131,4 +131,4 @@ export function saveRolePerms(roleId: number, menuId: number, permIds: Array<num
method: 'put',
data: {menuId: menuId, permIds: permIds}
})
}
}

8
src/layout/components/AppMain.vue
View File

@@ -13,15 +13,13 @@
<script lang="ts">
import {defineComponent} from "vue";
import {useStore} from '@/store'
import {useRoute} from "vue-router";
import {tagsViewStoreHook} from '@/store/modules/tagsView'
export default defineComponent({
setup() {
const store = useStore()
const route = useRoute()
const cachedViews = () => {
return store.state.tagsView.cachedViews
return tagsViewStoreHook().cachedViews
}
const key = () => {
return route.path
@@ -68,4 +66,4 @@ export default defineComponent({
padding-right: 15px;
}
}
</style>
</style>

16
src/layout/components/Navbar.vue
View File

@@ -48,12 +48,13 @@
</template>
<script>
import {reactive, computed, toRefs} from "vue";
import {useStore} from "@/store";
import {useRoute, useRouter} from "vue-router"
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import Hamburger from '@/components/Hamburger/index.vue'
import Screenfull from '@/components/screenfull/index.vue'
import {tagsViewStoreHook} from '@/store/modules/tagsView'
import {useAppStoreHook} from '@/store/modules/app'
import {useUserStoreHook} from '@/store/modules/user'
export default {
components: {
Breadcrumb,
@@ -61,26 +62,25 @@ export default {
Screenfull
},
setup() {
const store = useStore()
const route = useRoute()
const router = useRouter()
const sidebar = computed(() => {
return store.state.app.sidebar
return useAppStoreHook().sidebar
})
const device = computed(() => {
return store.state.app.device
return useAppStoreHook().device
})
const avatar = computed(() => {
return store.state.user.avatar
return useUserStoreHook().avatar
})
const state = reactive({
toggleSideBar: () => {
store.dispatch('app/toggleSideBar', false)
useAppStoreHook().toggleSidebar(false)
},
logout: () => {
store.dispatch('user/logout').then(()=>{
useUserStoreHook().logout().then(()=>{
router.push(`/login?redirect=${route.fullPath}`)
})
}

20
src/layout/components/Settings/index.vue
View File

@@ -29,30 +29,30 @@
<script>
import ThemePicker from '@/components/ThemePicker/index.vue'
import {defineComponent, reactive, toRefs, watch} from "vue"
import {useStore} from '@/store'
// import {useStore} from '@/store'
import { useSettingStoreHook } from "@/store/modules/settings";
export default defineComponent({
components: {ThemePicker},
setup() {
const store = useStore()
// const store = useStore()
const state = reactive({
fixedHeader:store.state.settings.fixedHeader,
tagsView:store.state.settings.tagsView,
sidebarLogo:store.state.settings.sidebarLogo,
fixedHeader:useSettingStoreHook().fixedHeader,
tagsView:useSettingStoreHook().tagsView,
sidebarLogo:useSettingStoreHook().sidebarLogo,
themeChange: (val) => {
store.dispatch('settings/changeSetting', { key: 'theme', val })
useSettingStoreHook().changeSetting( { key: 'theme', val })
}
})
watch(()=>state.fixedHeader,(value)=>{
store.dispatch('settings/changeSetting',{ key: 'fixedHeader', value })
useSettingStoreHook().changeSetting( { key: 'fixedHeader', value })
})
watch(() => state.tagsView, (value) => {
store.dispatch('settings/changeSetting', { key: 'showTagsView', value })
useSettingStoreHook().changeSetting( { key: 'showTagsView', value })
})
watch(() => state.sidebarLogo, (value) => {
store.dispatch('settings/changeSetting', { key: 'sidebarLogo', value })
useSettingStoreHook().changeSetting( { key: 'sidebarLogo', value })
})
return {

13
src/layout/components/Sidebar/index.vue
View File

@@ -34,7 +34,9 @@ import {computed, defineComponent} from "vue";
import SidebarItem from './SidebarItem.vue'
import Logo from './Logo.vue'
import variables from '@/styles/variables.scss'
import {useStore} from '@/store'
import { useSettingStoreHook } from "@/store/modules/settings";
import { useAppStoreHook } from "@/store/modules/app";
import { usePermissionStoreHook } from "@/store/modules/permission";
import {useRoute} from 'vue-router'
export default defineComponent({
@@ -43,11 +45,10 @@ export default defineComponent({
Logo
},
setup() {
const store = useStore();
const route = useRoute()
const sidebar = computed(() => store.state.app.sidebar)
const routes = computed(() => store.state.permission.routes)
const showLogo = computed(() => store.state.settings.sidebarLogo)
const sidebar = computed(() => useAppStoreHook().sidebar)
const routes = computed(() => usePermissionStoreHook().routes)
const showLogo = computed(() => useSettingStoreHook().sidebarLogo)
const activeMenu = computed(() => {
const {meta, path} = route
// if set path, the sidebar will highlight the path you set
@@ -56,7 +57,7 @@ export default defineComponent({
}
return path
})
const isCollapse = computed(() => !store.state.app.sidebar.opened)
const isCollapse = computed(() => !useAppStoreHook().sidebar.opened)
return {
sidebar,

28
src/layout/components/TagsView/index.vue
View File

@@ -32,10 +32,10 @@
<script lang="ts">
import {Close} from '@element-plus/icons'
import {tagsViewStoreHook} from '@/store/modules/tagsView'
import {usePermissionStoreHook} from '@/store/modules/Permission'
import ScrollPane from './ScrollPane.vue'
import path from 'path-browserify'
import {useStore} from "@store";
import {
defineComponent,
computed,
@@ -53,7 +53,6 @@ import {TagView} from "@store/interface";
export default defineComponent({
components: {ScrollPane,Close},
setup() {
const store = useStore()
const router = useRouter()
const instance = getCurrentInstance()
const currentRoute = useRoute()
@@ -86,7 +85,7 @@ export default defineComponent({
return tag.meta && tag.meta.affix
},
refreshSelectedTag: (view: TagView) => {
store.dispatch('tagsView/delCachedView', view)
tagsViewStoreHook().delCachedView(view)
const { fullPath } = view
nextTick(() => {
router.replace({ path: '/redirect' + fullPath }).catch(err => {
@@ -95,23 +94,24 @@ export default defineComponent({
})
},
closeSelectedTag: (view: TagView) => {
store.dispatch('tagsView/delView', view)
tagsViewStoreHook().delView(view);
if (state.isActive(view)) {
toLastView(store.state.tagsView.visitedViews, view)
toLastView(tagsViewStoreHook().visitedViews, view)
}
},
closeOthersTags: () => {
if (state.selectedTag.fullPath !== currentRoute.path && state.selectedTag.fullPath !== undefined) {
router.push(state.selectedTag.fullPath)
}
store.dispatch('tagsView/delOthersViews', state.selectedTag as TagView)
tagsViewStoreHook().delOthersViews(state.selectedTag as TagView)
},
closeAllTags: (view: TagView) => {
store.dispatch('tagsView/delAllViews', undefined)
tagsViewStoreHook().delAllViews(undefined);
if (state.affixTags.some(tag => tag.path === currentRoute.path)) {
return
}
toLastView(store.state.tagsView.visitedViews, view)
toLastView(tagsViewStoreHook().visitedViews, view)
},
openMenu: (tag: TagView, e: MouseEvent) => {
const menuMinWidth = 105
@@ -138,9 +138,9 @@ export default defineComponent({
})
const visitedViews = computed(() => {
return store.state.tagsView.visitedViews
return tagsViewStoreHook().visitedViews
})
const routes = computed(() => store.state.permission.routes)
const routes = computed(() =>usePermissionStoreHook().routes)
const filterAffixTags = (routes: RouteRecordRaw[], basePath = '/') => {
let tags: TagView[] = []
@@ -171,14 +171,14 @@ export default defineComponent({
for (const tag of state.affixTags) {
// Must have tag name
if (tag.name) {
store.dispatch('tagsView/addVisitedView', tag as TagView)
tagsViewStoreHook().addVisitedView(tag as TagView)
}
}
}
const addTags = () => {
if (currentRoute.name) {
store.dispatch('tagsView/addView', currentRoute)
tagsViewStoreHook().addView(currentRoute)
}
return false
}
@@ -192,7 +192,7 @@ export default defineComponent({
(scrollPaneRef.value as any).moveToCurrentTag(tag)
// When query is different then update
if ((tag.to as TagView).fullPath !== currentRoute.fullPath) {
store.dispatch('tagsView/updateVisitedView', currentRoute)
tagsViewStoreHook().updateVisitedView(currentRoute)
}
}
}

38
src/layout/index.vue
View File

@@ -21,9 +21,9 @@
<script>
import {computed, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, reactive, toRefs, watch} from "vue";
import {AppMain, Navbar, Settings, Sidebar, TagsView} from './components/index.ts'
import {useStore} from "@store";
import {useRoute} from "vue-router";
import {useRoute} from "vue-router";
import { useAppStoreHook } from "@/store/modules/app";
import { useSettingStoreHook } from "@/store/modules/settings";
const {body} = document
const WIDTH = 992
@@ -37,9 +37,7 @@ export default defineComponent({
TagsView
},
setup() {
const store = useStore()
const sidebar = computed(() => store.state.app.sidebar)
const sidebar = computed(() => useAppStoreHook().sidebar)
const isMobile = () => {
const rect = body.getBoundingClientRect()
return rect.width - 1 < WIDTH
@@ -47,17 +45,17 @@ export default defineComponent({
const resizeHandler = () => {
if (!document.hidden) {
store.dispatch('app/toggleDevice', isMobile() ? 'mobile' : 'desktop')
useAppStoreHook().toggleSidebar( isMobile() ? 'mobile' : 'desktop')
if (isMobile()) {
store.dispatch('app/closeSideBar', {withoutAnimation: true})
useAppStoreHook().closeSideBar({withoutAnimation: true});
}
}
}
const resizeMounted = () => {
if (isMobile()) {
store.dispatch('app/toggleDevice', 'mobile')
store.dispatch('app/closeSideBar', {withoutAnimation: true})
useAppStoreHook().toggleDevice( 'mobile' )
useAppStoreHook().toggleSidebar({withoutAnimation: true});
}
}
const addEventListenerOnResize = () => {
@@ -70,35 +68,35 @@ export default defineComponent({
const currentRoute = useRoute()
const watchRouter = watch(() => currentRoute.name, () => {
if (store.state.app.device === 'mobile' && store.state.app.sidebar.opened) {
store.dispatch('app/closeSideBar', false)
if (useAppStoreHook().device === 'mobile' && useAppStoreHook().sidebar.opened) {
useAppStoreHook().closeSideBar(false)
}
})
const state = reactive({
handleClickOutside: () => {
store.dispatch('app/closeSideBar', false)
useAppStoreHook().closeSideBar(false)
}
})
const classObj = computed(() => {
return {
hideSidebar: !store.state.app.sidebar.opened,
openSidebar: store.state.app.sidebar.opened,
withoutAnimation: store.state.app.sidebar.withoutAnimation,
mobile: store.state.app.device === 'mobile'
hideSidebar: !useAppStoreHook().sidebar.opened,
openSidebar: useAppStoreHook().sidebar.opened,
withoutAnimation: useAppStoreHook().sidebar.withoutAnimation,
mobile: useAppStoreHook().device === 'mobile'
}
})
const showSettings = computed(() => {
return store.state.settings.showSettings
return useSettingStoreHook().showSettings
})
const needTagsView = computed(() => {
return store.state.settings.tagsView
return useSettingStoreHook().tagsView
})
const fixedHeader = computed(() => {
return store.state.settings.fixedHeader
return useSettingStoreHook().fixedHeader
})
watchRouter()

11
src/main.ts
View File

@@ -1,9 +1,8 @@
import {createApp} from 'vue'
import App from './App.vue'
import router from "./router";
import {store, key} from './store'
import '@/styles/index.scss'
import { store } from "./store";
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
@@ -29,10 +28,8 @@ for (let iconName in ElIconModules) {
// 全局方法
app.config.globalProperties.$getDictItemsByCode = getDictItemsByCode
app
.component('Pagination', Pagination) // 全局组件
app.component('Pagination', Pagination) // 全局组件
.use(store)
.use(router)
.use(store, key)
.use(ElementPlus, {locale})
.mount('#app')
.mount('#app')

18
src/permission.ts
View File

@@ -1,8 +1,8 @@
import router from "@router";
import NProgress from 'nprogress';
import {ElMessage} from "element-plus";
import {store} from "@store";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { useUserStoreHook } from "@/store/modules/user";
NProgress.configure({showSpinner: false})
// 白名单
@@ -11,28 +11,28 @@ const whiteList = ['/login', '/auth-redirect']
router.beforeEach(async (to, form, next) => {
NProgress.start()
const hasToken = store.state.user.token
const hasToken =useUserStoreHook().token
if (hasToken) {
// 如果登录成功，跳转到首页
if (to.path === '/login') {
next({path: '/'})
NProgress.done()
} else {
const hasGetUserInfo = store.state.user.roles.length > 0
const hasGetUserInfo =useUserStoreHook().roles.length > 0
if (hasGetUserInfo) {
next()
} else {
try {
await store.dispatch('user/getUserInfo')
const roles = store.state.user.roles
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
await useUserStoreHook().getUserInfo()
const roles =useUserStoreHook().roles
const accessRoutes:any = await usePermissionStoreHook().generateRoutes(roles)
accessRoutes.forEach((route: any) => {
router.addRoute(route)
})
next({...to, replace: true})
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
await useUserStoreHook().resetToken()
ElMessage.error(error as any || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
@@ -52,4 +52,4 @@ router.beforeEach(async (to, form, next) => {
router.afterEach(() => {
NProgress.done()
})
})

30
src/store/index.ts
View File

@@ -1,27 +1,3 @@
import {InjectionKey} from 'vue'
import {createStore,useStore as baseUseStore ,Store} from 'vuex'
import {RootStateTypes} from "@store/interface";
// Vite 使用特殊的 import.meta.glob 函数从文件系统导入多个模块
// @see https://cn.vitejs.dev/guide/features.html#glob-import
const moduleFiles = import.meta.globEager('./modules/*.ts')
const paths:string[]=[]
for (const path in moduleFiles) {
paths.push(path)
}
const modules = paths.reduce((modules: { [x: string]: any }, modulePath: string) => {
const moduleKey = modulePath.replace(/^\.\/modules\/(.*)\.\w+$/, '$1');
modules[moduleKey] = moduleFiles[modulePath].default;
return modules;
}, {});
export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
export const store = createStore<RootStateTypes>({modules})
export function useStore(){
return baseUseStore(key)
}
import { createPinia } from "pinia";
const store = createPinia();
export { store };

51
src/store/modules/app.ts
View File

@@ -1,49 +1,38 @@
import {Module} from "vuex";
import {AppState,RootStateTypes} from "@store/interface";
import {AppState} from "@store/interface";
import {Local} from "@utils/storage";
import { store } from "@/store";
import { defineStore } from "pinia";
const appModule: Module<AppState, RootStateTypes> = {
namespaced: true,
state: {
export const useAppStore = defineStore({
id: "youlai-app",
state: ():AppState=>({
device: 'desktop',
sidebar: {
opened: Local.get('sidebarStatus') ? !!+Local.get('sidebarStatus') : true,
withoutAnimation: false
}
},
mutations: {
TOGGLE_SIDEBAR: state => {
state.sidebar.opened = !state.sidebar.opened
console.log('state.sidebar.opened',state.sidebar.opened)
state.sidebar.withoutAnimation = false
if (state.sidebar.opened) {
}),
actions: {
toggleSidebar() {
this.sidebar.opened = !this.sidebar.opened
this.sidebar.withoutAnimation = false
if (this.sidebar.opened) {
Local.set('sidebarStatus', 1)
} else {
Local.set('sidebarStatus', 0)
}
},
CLOSE_SIDEBAR: (state, withoutAnimation) => {
closeSideBar ( withoutAnimation:any) {
Local.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
this.sidebar.opened = false
this.sidebar.withoutAnimation = withoutAnimation
},
TOGGLE_DEVICE: (state, device) => {
toggleDevice( device:any) {
console.log('TOGGLE_DEVICE',device)
state.device = device
}
},
actions: {
toggleSideBar({commit}) {
commit('TOGGLE_SIDEBAR')
},
closeSideBar({commit}, {withoutAnimation}) {
commit('CLOSE_SIDEBAR', withoutAnimation)
},
async toggleDevice({commit}, device) {
commit('TOGGLE_DEVICE', device)
this.device = device
}
}
})
export function useAppStoreHook() {
return useAppStore(store);
}
export default appModule;

32
src/store/modules/permission.ts
View File

@@ -1,9 +1,9 @@
import {Module} from "vuex";
import {PermissionState, RootStateTypes} from "@store/interface";
import {PermissionState} from "@store/interface";
import {RouteRecordRaw} from 'vue-router'
import {constantRoutes} from '@/router'
import {listRoutes} from "@/api/system/menu";
import { defineStore } from "pinia";
import { store } from "@/store";
const modules = import.meta.glob("../../views/**/**.vue");
export const Layout = () => import( '@/layout/index.vue')
@@ -45,20 +45,18 @@ export const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) =>
}
const permissionModule: Module<PermissionState, RootStateTypes> = {
namespaced: true,
state: {
export const usePermissionStore = defineStore({
id:"youlai-permission",
state:():PermissionState=>( {
routes: [],
addRoutes: []
},
mutations: {
SET_ROUTES: (state: PermissionState, routes: RouteRecordRaw[]) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
},
}),
actions: {
generateRoutes({commit}, roles: string[]) {
setRoutes( routes: RouteRecordRaw[]){
this.addRoutes = routes
this.routes = constantRoutes.concat(routes)
},
generateRoutes( roles: string[]) {
return new Promise((resolve, reject) => {
listRoutes().then(response => {
const asyncRoutes = response.data
@@ -68,7 +66,7 @@ const permissionModule: Module<PermissionState, RootStateTypes> = {
} else {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
this.setRoutes(accessedRoutes)
resolve(accessedRoutes)
}).catch(error => {
reject(error)
@@ -76,5 +74,7 @@ const permissionModule: Module<PermissionState, RootStateTypes> = {
})
}
}
})
export function usePermissionStoreHook() {
return usePermissionStore(store);
}
export default permissionModule;

39
src/store/modules/settings.ts
View File

@@ -1,49 +1,46 @@
import {Module} from "vuex";
import {SettingState, RootStateTypes} from "@store/interface";
import { defineStore } from "pinia";
import { store } from "@/store";
import {SettingState} from "@store/interface";
import defaultSettings from '../../settings'
const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings
const settingModule: Module<SettingState, RootStateTypes> = {
namespaced: true,
state: {
export const useSettingStore = defineStore({
id: "pure-setting",
state:():SettingState =>({
theme: '',
showSettings: showSettings,
tagsView: tagsView,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo,
},
mutations: {
CHANGE_SETTING: (state: SettingState, payload: { key: string, value: any }) => {
}),
actions: {
async changeSetting( payload: { key: string, value: any }){
const {key, value} = payload
switch (key) {
case 'theme':
state.theme = value
this.theme = value
break
case 'showSettings':
state.showSettings = value
this.showSettings = value
break
case 'fixedHeader':
state.fixedHeader = value
this.fixedHeader = value
break
case 'tagsView':
state.tagsView = value
this.tagsView = value
break
case 'sidebarLogo':
state.sidebarLogo = value
this.sidebarLogo = value
break
default:
break
}
}
},
actions: {
changeSetting({commit}, data) {
commit('CHANGE_SETTING', data)
}
}
})
export function useSettingStoreHook() {
return useSettingStore(store);
}
export default settingModule;

193
src/store/modules/tagsView.ts
View File

@@ -1,158 +1,135 @@
import {Module} from "vuex";
import {TagsViewState,RootStateTypes} from "@store/interface";
import { defineStore } from "pinia";
import { store } from "@/store";
import {TagsViewState} from "@store/interface";
const tagsViewModule: Module<TagsViewState, RootStateTypes> = {
namespaced: true,
state: {
const tagsViewStore=defineStore({
id:"youlai-tagsView",
state:():TagsViewState=>( {
visitedViews: [],
cachedViews: []
},
mutations: {
ADD_VISITED_VIEW: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push(
}),
actions: {
addVisitedView ( view:any) {
if (this.visitedViews.some(v => v.path === view.path)) return
this.visitedViews.push(
Object.assign({}, view, {
title: view.meta?.title || 'no-name'
})
)
},
ADD_CACHED_VIEW: (state, view) => {
if (state.cachedViews.includes(view.name)) return
addCachedView(view:any) {
if (this.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
state.cachedViews.push(view.name)
this.cachedViews.push(view.name)
}
},
DEL_VISITED_VIEW: (state, view) => {
for (const [i, v] of state.visitedViews.entries()) {
if (v.path === view.path) {
state.visitedViews.splice(i, 1)
break
}
}
delVisitedView( view:any) {
return new Promise(resolve => {
for (const [i, v] of this.visitedViews.entries()) {
if (v.path === view.path) {
this.visitedViews.splice(i, 1)
break
}
}
resolve([...this.visitedViews])
})
},
DEL_CACHED_VIEW: (state, view) => {
const index = state.cachedViews.indexOf(view.name)
index > -1 && state.cachedViews.splice(index, 1)
delCachedView ( view:any) {
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
index > -1 && this.cachedViews.splice(index, 1)
resolve([...this.cachedViews])
})
},
DEL_OTHERS_VISITED_VIEWS: (state, view) => {
state.visitedViews = state.visitedViews.filter(v => {
return v.meta?.affix || v.path === view.path
})
delOthersVisitedViews (view:any) {
return new Promise(resolve => {
this.visitedViews = this.visitedViews.filter(v => {
return v.meta?.affix || v.path === view.path
})
resolve([...this.visitedViews])
})
},
DEL_OTHERS_CACHED_VIEWS: (state, view) => {
const index = state.cachedViews.indexOf(view.name)
if (index > -1) {
state.cachedViews = state.cachedViews.slice(index, index + 1)
} else {
// if index = -1, there is no cached tags
state.cachedViews = []
}
delOthersCachedViews( view:any) {
return new Promise(resolve => {
const index = this.cachedViews.indexOf(view.name)
if (index > -1) {
this.cachedViews = this.cachedViews.slice(index, index + 1)
} else {
// if index = -1, there is no cached tags
this.cachedViews = []
}
resolve([...this.cachedViews])
})
},
DEL_ALL_VISITED_VIEWS: state => {
// keep affix tags
const affixTags = state.visitedViews.filter(tag => tag.meta?.affix)
state.visitedViews = affixTags
},
DEL_ALL_CACHED_VIEWS: state => {
state.cachedViews = []
},
UPDATE_VISITED_VIEW: (state, view) => {
for (let v of state.visitedViews) {
updateVisitedView (view:any) {
for (let v of this.visitedViews) {
if (v.path === view.path) {
v = Object.assign(v, view)
break
}
}
}
},
actions: {
addView({ dispatch }, view) {
dispatch('addVisitedView', view)
dispatch('addCachedView', view)
},
addVisitedView({ commit }, view) {
commit('ADD_VISITED_VIEW', view)
addView( view:any) {
this.addVisitedView( view)
this.addCachedView(view)
},
addCachedView({ commit }, view) {
commit('ADD_CACHED_VIEW', view)
},
delView({ dispatch, state }, view) {
delView( view:any) {
return new Promise(resolve => {
dispatch('delVisitedView', view)
dispatch('delCachedView', view)
this.delVisitedView(view)
this.delCachedView( view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
},
delVisitedView({ commit, state }, view) {
delOthersViews( view:any) {
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)
this.delOthersVisitedViews(view)
this.delOthersCachedViews(view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
},
delOthersVisitedViews({ commit, state }, view) {
delAllViews( view:any) {
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)
const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
this.visitedViews = affixTags
this.cachedViews = []
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
})
})
},
delAllVisitedViews({ commit, state }) {
delAllVisitedViews() {
return new Promise(resolve => {
commit('DEL_ALL_VISITED_VIEWS')
resolve([...state.visitedViews])
const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
this.visitedViews = affixTags
resolve([...this.visitedViews])
})
},
delAllCachedViews({ commit, state }) {
delAllCachedViews() {
return new Promise(resolve => {
commit('DEL_ALL_CACHED_VIEWS')
resolve([...state.cachedViews])
this.cachedViews = []
resolve([...this.cachedViews])
})
},
updateVisitedView({ commit }, view) {
commit('UPDATE_VISITED_VIEW', view)
}
}
})
export function tagsViewStoreHook() {
return tagsViewStore(store);
}
export default tagsViewModule;

64
src/store/modules/user.ts
View File

@@ -1,4 +1,5 @@
import {Module} from "vuex";
import { defineStore } from "pinia";
import { store } from "@/store";
import {UserState, RootStateTypes} from "@store/interface";
import {Local} from "@utils/storage";
import {getUserInfo, login, logout} from "@api/login";
@@ -15,36 +16,19 @@ const getDefaultState = () => {
}
}
const userModule: Module<UserState, RootStateTypes> = {
namespaced: true,
state: {
export const useUserStore = defineStore({
id:"youlai-user",
state: ():UserState=>({
token: Local.get('token') || '',
nickname: '',
avatar: '',
roles: [],
perms: []
},
mutations: {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN(state: UserState, token: string) {
state.token = token
},
SET_NICKNAME(state: UserState, nickname: string) {
state.nickname = nickname
},
SET_AVATAR(state: UserState, avatar: string) {
state.avatar = avatar
},
SET_ROLES(state: UserState, roles: string[]) {
state.roles = roles
},
SET_PERMS(state: UserState, perms: string[]) {
state.perms = perms
}
},
}),
actions: {
async RESET_STATE () {
this.$reset()
},
/**
* 用户登录请求
* @param userInfo 登录用户信息
@@ -53,7 +37,7 @@ const userModule: Module<UserState, RootStateTypes> = {
* code: 验证码
* uuid: 匹配正确验证码的 key
*/
login({commit}, userInfo: { username: string, password: string, code: string, uuid: string }) {
login(userInfo: { username: string, password: string, code: string, uuid: string }) {
const {username, password, code, uuid} = userInfo
return new Promise((resolve, reject) => {
login(
@@ -68,7 +52,7 @@ const userModule: Module<UserState, RootStateTypes> = {
const {access_token, token_type} = response.data
const accessToken = token_type + " " + access_token
Local.set("token", accessToken)
commit('SET_TOKEN', accessToken)
this.token = accessToken
resolve(access_token)
}).catch(error => {
reject(error)
@@ -78,23 +62,21 @@ const userModule: Module<UserState, RootStateTypes> = {
/**
* 获取用户信息（昵称、头像、角色集合、权限集合）
*/
getUserInfo({commit, state}) {
getUserInfo() {
return new Promise(((resolve, reject) => {
getUserInfo().then(response => {
const {data} = response
if (!data) {
return reject('Verification failed, please Login again.')
}
console.log(data)
const {nickname, avatar, roles, perms} = data
if (!roles || roles.length <= 0) {
reject('getUserInfo: roles must be a non-null array!')
}
commit('SET_NICKNAME', nickname)
commit('SET_AVATAR', avatar)
commit('SET_ROLES', roles)
commit('SET_PERMS', perms)
this.nickname = nickname
this.avatar = avatar
this.roles = roles
this.perms = perms
resolve(data)
}).catch(error => {
reject(error)
@@ -106,11 +88,11 @@ const userModule: Module<UserState, RootStateTypes> = {
/**
* 注销
*/
logout({commit, state}) {
logout() {
return new Promise(((resolve, reject) => {
logout().then(() => {
Local.remove('token')
commit('RESET_STATE')
this.RESET_STATE()
resetRouter()
resolve(null)
}).catch(error => {
@@ -122,15 +104,17 @@ const userModule: Module<UserState, RootStateTypes> = {
/**
* 清除 Token
*/
resetToken({commit}){
resetToken(){
return new Promise(resolve=>{
Local.remove('token')
commit('RESET_STATE')
this.RESET_STATE()
resolve(null)
})
}
}
})
export function useUserStoreHook() {
return useUserStore(store);
}
export default userModule;

7
src/utils/request.ts
View File

@@ -1,8 +1,7 @@
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import {Local} from "@utils/storage";
import {store} from "@store";
import { useUserStoreHook } from "@/store/modules/user";
// 创建 axios 实例
const service = axios.create({
@@ -17,7 +16,7 @@ service.interceptors.request.use(
if (!config?.headers) {
throw new Error(`Expected 'config' and 'config.headers' not to be undefined`);
}
if (store.state.user.token) {
if (useUserStoreHook().token) {
config.headers.Authorization = `${Local.get('token')}`;
}
return config
@@ -62,4 +61,4 @@ service.interceptors.response.use(
);
// 导出 axios 实例
export default service
export default service

4
src/views/login/index.vue
View File

@@ -72,7 +72,7 @@
<script>
import SvgIcon from '@/components/SvgIcon/index.vue';
import {getCaptcha} from "@/api/login";
import { useUserStoreHook } from "@/store/modules/user";
export default {
name: 'Login',
components:{
@@ -130,7 +130,7 @@ export default {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
useUserStoreHook().login(this.loginForm).then(() => {
this.$router.push({ path: this.redirect || '/' })
this.loading = false
}).catch(() => {