fix: #I5KCI6

This commit is contained in:
xingyu 2022-08-03 12:38:58 +08:00
parent 55b63c35c9
commit b64261a293
11 changed files with 94 additions and 91 deletions

View File

@ -2,18 +2,10 @@
import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox } from 'element-plus' import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useCache } from '@/hooks/web/useCache' import { useCache } from '@/hooks/web/useCache'
import { removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
import { useTagsViewStore } from '@/store/modules/tagsView'
import avatarImg from '@/assets/imgs/avatar.gif' import avatarImg from '@/assets/imgs/avatar.gif'
import { useUserStore } from '@/store/modules/user'
const tagsViewStore = useTagsViewStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('user-info')
const { t } = useI18n() const { t } = useI18n()
@ -21,6 +13,12 @@ const { wsCache } = useCache()
const { push, replace } = useRouter() const { push, replace } = useRouter()
const userStore = useUserStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('user-info')
const user = wsCache.get('user') const user = wsCache.get('user')
const avatar = user.user.avatar ? user.user.avatar : avatarImg const avatar = user.user.avatar ? user.user.avatar : avatarImg
@ -34,10 +32,7 @@ const loginOut = () => {
type: 'warning' type: 'warning'
}) })
.then(async () => { .then(async () => {
resetRouter() // userStore.loginOut()
wsCache.clear()
removeToken()
tagsViewStore.delAllViews()
replace('/login') replace('/login')
}) })
.catch(() => {}) .catch(() => {})

View File

@ -6,6 +6,7 @@ import { getAccessToken, getRefreshToken, getTenantId, removeToken, setToken } f
import errorCode from './errorCode' import errorCode from './errorCode'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { resetRouter } from '@/router' import { resetRouter } from '@/router'
import { useCache } from '@/hooks/web/useCache'
const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
const BASE_URL = import.meta.env.VITE_BASE_URL const BASE_URL = import.meta.env.VITE_BASE_URL
@ -205,10 +206,12 @@ const handleAuthorized = () => {
type: 'warning' type: 'warning'
}) })
.then(() => { .then(() => {
removeToken() const { wsCache } = useCache()
resetRouter() // 重置静态路由表 resetRouter() // 重置静态路由表
wsCache.clear()
removeToken()
isRelogin.show = false isRelogin.show = false
location.href = '/' location.href = '/login'
}) })
.catch(() => { .catch(() => {
isRelogin.show = false isRelogin.show = false

View File

@ -2,13 +2,13 @@ import type { App } from 'vue'
import { getAccessToken } from '@/utils/auth' import { getAccessToken } from '@/utils/auth'
import type { RouteRecordRaw } from 'vue-router' import type { RouteRecordRaw } from 'vue-router'
import remainingRouter from './modules/remaining' import remainingRouter from './modules/remaining'
import { useCache } from '@/hooks/web/useCache'
import { useTitle } from '@/hooks/web/useTitle' import { useTitle } from '@/hooks/web/useTitle'
import { useNProgress } from '@/hooks/web/useNProgress' import { useNProgress } from '@/hooks/web/useNProgress'
import { usePageLoading } from '@/hooks/web/usePageLoading' import { usePageLoading } from '@/hooks/web/usePageLoading'
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router'
import { usePermissionStoreWithOut } from '@/store/modules/permission' import { usePermissionStoreWithOut } from '@/store/modules/permission'
import { useDictStoreWithOut } from '@/store/modules/dict' import { useDictStoreWithOut } from '@/store/modules/dict'
import { useUserStoreWithOut } from '@/store/modules/user'
import { listSimpleDictDataApi } from '@/api/system/dict/dict.data' import { listSimpleDictDataApi } from '@/api/system/dict/dict.data'
import { isRelogin } from '@/config/axios' import { isRelogin } from '@/config/axios'
@ -16,7 +16,7 @@ const permissionStore = usePermissionStoreWithOut()
const dictStore = useDictStoreWithOut() const dictStore = useDictStoreWithOut()
const { wsCache } = useCache() const userStore = useUserStoreWithOut()
const { start, done } = useNProgress() const { start, done } = useNProgress()
@ -48,31 +48,27 @@ router.beforeEach(async (to, from, next) => {
if (to.path === '/login') { if (to.path === '/login') {
next({ path: '/' }) next({ path: '/' })
} else { } else {
if (!dictStore.getIsSetDict) { console.info(3)
isRelogin.show = true
// 获取所有字典 // 获取所有字典
const res = await listSimpleDictDataApi() const res = await listSimpleDictDataApi()
dictStore.setDictMap(res) dictStore.setDictMap(res)
dictStore.setIsSetDict(true) if (userStore.getRoles.length === 0) {
} isRelogin.show = true
if (permissionStore.getIsAddRouters) {
isRelogin.show = false isRelogin.show = false
next() console.info(2)
return // 后端过滤菜单
} await permissionStore.generateRoutes()
// 开发者可根据实际情况进行修改
const roleRouters = wsCache.get('roleRouters') || []
await permissionStore.generateRoutes(roleRouters as AppCustomRouteRecordRaw[])
permissionStore.getAddRouters.forEach((route) => { permissionStore.getAddRouters.forEach((route) => {
router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表 router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表
}) })
const redirectPath = from.query.redirect || to.path const redirectPath = from.query.redirect || to.path
const redirect = decodeURIComponent(redirectPath as string) const redirect = decodeURIComponent(redirectPath as string)
const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect } const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
permissionStore.setIsAddRouters(true)
next(nextData) next(nextData)
} else {
console.info(3)
next()
}
} }
} else { } else {
if (whiteList.indexOf(to.path) !== -1) { if (whiteList.indexOf(to.path) !== -1) {

View File

@ -13,14 +13,12 @@ export interface DictTypeType {
dictValue: DictValueType[] dictValue: DictValueType[]
} }
export interface DictState { export interface DictState {
isSetDict: boolean
dictMap: Recordable dictMap: Recordable
} }
export const useDictStore = defineStore({ export const useDictStore = defineStore({
id: 'dict', id: 'dict',
state: (): DictState => ({ state: (): DictState => ({
isSetDict: false,
dictMap: {} dictMap: {}
}), }),
persist: { persist: {
@ -30,8 +28,12 @@ export const useDictStore = defineStore({
getDictMap(): Recordable { getDictMap(): Recordable {
return this.dictMap return this.dictMap
}, },
getIsSetDict(): boolean { getHasDictData(): Boolean {
return this.isSetDict if (this.dictMap.length > 0) {
return true
} else {
return false
}
} }
}, },
actions: { actions: {
@ -53,9 +55,6 @@ export const useDictStore = defineStore({
}) })
}) })
this.dictMap = dictMap this.dictMap = dictMap
},
setIsSetDict(isSetDict: boolean) {
this.isSetDict = isSetDict
} }
} }
}) })

View File

@ -2,12 +2,15 @@ import { defineStore } from 'pinia'
import { store } from '../index' import { store } from '../index'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import remainingRouter from '@/router/modules/remaining' import remainingRouter from '@/router/modules/remaining'
import { generateRoutes, flatMultiLevelRoutes } from '@/utils/routerHelper' import { generateRoute, flatMultiLevelRoutes } from '@/utils/routerHelper'
import { getAsyncRoutesApi } from '@/api/login'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
export interface PermissionState { export interface PermissionState {
routers: AppRouteRecordRaw[] routers: AppRouteRecordRaw[]
addRouters: AppRouteRecordRaw[] addRouters: AppRouteRecordRaw[]
isAddRouters: boolean
menuTabRouters: AppRouteRecordRaw[] menuTabRouters: AppRouteRecordRaw[]
} }
@ -16,7 +19,6 @@ export const usePermissionStore = defineStore({
state: (): PermissionState => ({ state: (): PermissionState => ({
routers: [], routers: [],
addRouters: [], addRouters: [],
isAddRouters: false,
menuTabRouters: [] menuTabRouters: []
}), }),
persist: { persist: {
@ -29,18 +31,21 @@ export const usePermissionStore = defineStore({
getAddRouters(): AppRouteRecordRaw[] { getAddRouters(): AppRouteRecordRaw[] {
return flatMultiLevelRoutes(cloneDeep(this.addRouters)) return flatMultiLevelRoutes(cloneDeep(this.addRouters))
}, },
getIsAddRouters(): boolean {
return this.isAddRouters
},
getMenuTabRouters(): AppRouteRecordRaw[] { getMenuTabRouters(): AppRouteRecordRaw[] {
return this.menuTabRouters return this.menuTabRouters
} }
}, },
actions: { actions: {
generateRoutes(routers?: AppCustomRouteRecordRaw[] | string[]): Promise<unknown> { async generateRoutes(): Promise<unknown> {
return new Promise<void>((resolve) => { return new Promise<void>(async (resolve) => {
let routerMap: AppRouteRecordRaw[] = [] let res: AppCustomRouteRecordRaw[]
routerMap = generateRoutes(routers as AppCustomRouteRecordRaw[]) if (wsCache.get('roleRouters')) {
res = wsCache.get('roleRouters') as AppCustomRouteRecordRaw[]
} else {
res = await getAsyncRoutesApi()
wsCache.set('roleRouters', res)
}
const routerMap: AppRouteRecordRaw[] = generateRoute(res as AppCustomRouteRecordRaw[])
// 动态路由404一定要放到最后面 // 动态路由404一定要放到最后面
this.addRouters = routerMap.concat([ this.addRouters = routerMap.concat([
{ {
@ -58,9 +63,6 @@ export const usePermissionStore = defineStore({
resolve() resolve()
}) })
}, },
setIsAddRouters(state: boolean): void {
this.isAddRouters = state
},
setMenuTabRouters(routers: AppRouteRecordRaw[]): void { setMenuTabRouters(routers: AppRouteRecordRaw[]): void {
this.menuTabRouters = routers this.menuTabRouters = routers
} }

View File

@ -1,18 +1,19 @@
import { store } from '../index' import { store } from '../index'
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { getAccessToken } from '@/utils/auth' import { getAccessToken, removeToken } from '@/utils/auth'
import { useCache } from '@/hooks/web/useCache' import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache() const { wsCache } = useCache()
interface UserInfoVO { interface UserVO {
permissions: []
roles: []
user: {
avatar: string
id: number id: number
avatar: string
nickname: string nickname: string
} }
interface UserInfoVO {
permissions: string[]
roles: string[]
user: UserVO
} }
export const useUserStore = defineStore({ export const useUserStore = defineStore({
@ -26,6 +27,17 @@ export const useUserStore = defineStore({
nickname: '' nickname: ''
} }
}), }),
getters: {
getPermissions(): string[] {
return this.permissions
},
getRoles(): string[] {
return this.roles
},
getUser(): UserVO {
return this.user
}
},
actions: { actions: {
async getUserInfoAction(userInfo: UserInfoVO) { async getUserInfoAction(userInfo: UserInfoVO) {
if (!getAccessToken()) { if (!getAccessToken()) {
@ -37,6 +49,11 @@ export const useUserStore = defineStore({
this.user = userInfo.user this.user = userInfo.user
wsCache.set('user', userInfo) wsCache.set('user', userInfo)
}, },
loginOut() {
removeToken()
wsCache.clear()
this.resetState()
},
resetState() { resetState() {
this.permissions = [] this.permissions = []
this.roles = [] this.roles = []

View File

@ -48,7 +48,7 @@ export const getRawRoute = (route: RouteLocationNormalized): RouteLocationNormal
} }
// 后端控制路由生成 // 后端控制路由生成
export const generateRoutes = (routes: AppCustomRouteRecordRaw[]): AppRouteRecordRaw[] => { export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecordRaw[] => {
const res: AppRouteRecordRaw[] = [] const res: AppRouteRecordRaw[] = []
const modulesRoutesKeys = Object.keys(modules) const modulesRoutesKeys = Object.keys(modules)
for (const route of routes) { for (const route of routes) {
@ -88,7 +88,7 @@ export const generateRoutes = (routes: AppCustomRouteRecordRaw[]): AppRouteRecor
data.component = modules[modulesRoutesKeys[index]] data.component = modules[modulesRoutesKeys[index]]
} }
if (route.children) { if (route.children) {
data.children = generateRoutes(route.children) data.children = generateRoute(route.children)
} }
res.push(data) res.push(data)
} }

View File

@ -21,8 +21,7 @@ import {
getPassword, getPassword,
getTenantName getTenantName
} from '@/utils/auth' } from '@/utils/auth'
import { useUserStoreWithOut } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import { useCache } from '@/hooks/web/useCache'
import { usePermissionStore } from '@/store/modules/permission' import { usePermissionStore } from '@/store/modules/permission'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
@ -34,10 +33,9 @@ import { Verify } from '@/components/Verifition'
const { currentRoute, addRoute, push } = useRouter() const { currentRoute, addRoute, push } = useRouter()
const permissionStore = usePermissionStore() const permissionStore = usePermissionStore()
const userStore = useUserStoreWithOut() const userStore = useUserStore()
const formLogin = ref() const formLogin = ref()
const { validForm } = useFormValid(formLogin) const { validForm } = useFormValid(formLogin)
const { wsCache } = useCache()
const { setLoginState, getLoginState } = useLoginState() const { setLoginState, getLoginState } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN) const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
const iconSize = 30 const iconSize = 30
@ -122,13 +120,14 @@ const handleLogin = async (params) => {
// //
const getRoutes = async () => { const getRoutes = async () => {
// //
const res = await LoginApi.getAsyncRoutesApi() await permissionStore.generateRoutes()
wsCache.set('roleRouters', res)
await permissionStore.generateRoutes(res)
permissionStore.getAddRouters.forEach((route) => { permissionStore.getAddRouters.forEach((route) => {
addRoute(route as RouteRecordRaw) // 访 addRoute(route as RouteRecordRaw) // 访
}) })
permissionStore.setIsAddRouters(true) if (!redirect.value) {
redirect.value = '/'
}
console.info(redirect.value)
push({ path: redirect.value || permissionStore.addRouters[0].path }) push({ path: redirect.value || permissionStore.addRouters[0].path })
} }

View File

@ -5,18 +5,12 @@ import LoginFormTitle from './LoginFormTitle.vue'
import { ElForm, ElFormItem, ElInput, ElRow, ElCol, ElMessage } from 'element-plus' import { ElForm, ElFormItem, ElInput, ElRow, ElCol, ElMessage } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { required } from '@/utils/formRules' import { required } from '@/utils/formRules'
import { import { getTenantIdByNameApi, sendSmsCodeApi, smsLoginApi, getInfoApi } from '@/api/login'
getTenantIdByNameApi,
getAsyncRoutesApi,
sendSmsCodeApi,
smsLoginApi,
getInfoApi
} from '@/api/login'
import { useCache } from '@/hooks/web/useCache' import { useCache } from '@/hooks/web/useCache'
import { usePermissionStore } from '@/store/modules/permission' import { usePermissionStore } from '@/store/modules/permission'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { setToken } from '@/utils/auth' import { setToken } from '@/utils/auth'
import { useUserStoreWithOut } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router' import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
import { useLoginState, LoginStateEnum, useFormValid } from './useLogin' import { useLoginState, LoginStateEnum, useFormValid } from './useLogin'
const formSmsLogin = ref() const formSmsLogin = ref()
@ -27,7 +21,7 @@ const iconHouse = useIcon({ icon: 'ep:house' })
const iconCellphone = useIcon({ icon: 'ep:cellphone' }) const iconCellphone = useIcon({ icon: 'ep:cellphone' })
const iconCircleCheck = useIcon({ icon: 'ep:circle-check' }) const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
const { wsCache } = useCache() const { wsCache } = useCache()
const userStore = useUserStoreWithOut() const userStore = useUserStore()
const permissionStore = usePermissionStore() const permissionStore = usePermissionStore()
const { currentRoute, addRoute, push } = useRouter() const { currentRoute, addRoute, push } = useRouter()
const loginLoading = ref(false) const loginLoading = ref(false)
@ -120,13 +114,10 @@ const signIn = async () => {
// //
const getRoutes = async () => { const getRoutes = async () => {
// //
const routers = await getAsyncRoutesApi() await permissionStore.generateRoutes()
wsCache.set('roleRouters', routers)
await permissionStore.generateRoutes(routers).catch(() => {})
permissionStore.getAddRouters.forEach((route) => { permissionStore.getAddRouters.forEach((route) => {
addRoute(route as RouteRecordRaw) // 访 addRoute(route as RouteRecordRaw) // 访
}) })
permissionStore.setIsAddRouters(true)
push({ path: redirect.value || permissionStore.addRouters[0].path }) push({ path: redirect.value || permissionStore.addRouters[0].path })
} }
</script> </script>

View File

@ -47,7 +47,8 @@ export const modelSchema = reactive<FormSchema[]>([
{ {
label: '显示排序', label: '显示排序',
field: 'sort', field: 'sort',
component: 'InputNumber' component: 'InputNumber',
value: 0
}, },
{ {
label: '状态', label: '状态',

View File

@ -253,7 +253,7 @@ onMounted(async () => {
</el-table> </el-table>
</ContentWrap> </ContentWrap>
<!-- 添加或修改菜单对话框 --> <!-- 添加或修改菜单对话框 -->
<Dialog v-model="dialogVisible" :title="dialogTitle" maxHeight="400px" width="40%"> <Dialog v-model="dialogVisible" :title="dialogTitle" maxHeight="400px" width="45%">
<el-form <el-form
:model="menuForm" :model="menuForm"
:rules="rules" :rules="rules"