cxc/yg-point-mall
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

cache routes and user info data locally

Browse Source
This commit is contained in:
ailanyin
2023-05-16 12:30:54 +08:00
parent 11b23ec129
commit 6706db0871
4 changed files with 147 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -25,6 +25,7 @@
"fuse.js": "6.6.2", "fuse.js": "6.6.2",
"js-cookie": "3.0.1", "js-cookie": "3.0.1",
"jsencrypt": "3.3.1", "jsencrypt": "3.3.1",
"lodash-es": "^4.17.21",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pinia": "2.0.22", "pinia": "2.0.22",
"pinia-plugin-persistedstate": "^3.1.0", "pinia-plugin-persistedstate": "^3.1.0",

12
src/api/login.js
View File

@ -1,4 +1,6 @@
import request from '@/utils/request' import request from '@/utils/request'
import usePermissionStore from "@/store/modules/permission";
import useUserStore from "@/store/modules/user";
// 登录方法 // 登录方法
export function login(username, password, code, uuid) { export function login(username, password, code, uuid) {
@ -32,6 +34,11 @@ export function register(data) {
// 获取用户详细信息 // 获取用户详细信息
export function getInfo() { export function getInfo() {
if (useUserStore().userInfoRes) {
return new Promise((resolve, reject) => {
resolve(useUserStore().userInfoRes)
})
}
return request({ return request({
url: '/getInfo', url: '/getInfo',
method: 'get' method: 'get'
@ -60,6 +67,11 @@ export function getCodeImg() {
// 获取路由 // 获取路由
export const getRouters = () => { export const getRouters = () => {
if (usePermissionStore().routesRes) {
return new Promise((resolve, reject) => {
resolve(usePermissionStore().routesRes)
})
}
return request({ return request({
url: '/getRouters', url: '/getRouters',
method: 'get' method: 'get'

234
src/store/modules/permission.js
View File

@ -1,138 +1,150 @@
import auth from '@/plugins/auth' import auth from '@/plugins/auth'
import router, { constantRoutes, dynamicRoutes } from '@/router' import router, {constantRoutes, dynamicRoutes} from '@/router'
import Layout from '@/layout/index' import Layout from '@/layout/index'
import ParentView from '@/components/ParentView' import ParentView from '@/components/ParentView'
import InnerLink from '@/layout/components/InnerLink' import InnerLink from '@/layout/components/InnerLink'
import {getRouters} from "@/api/login"; import {getRouters} from "@/api/login";
import {cloneDeep} from 'lodash-es'
// 匹配views里面所有的.vue文件 // 匹配views里面所有的.vue文件
const modules = import.meta.glob('./../../views/**/*.vue') const modules = import.meta.glob('./../../views/**/*.vue')
const usePermissionStore = defineStore( const usePermissionStore = defineStore(
'permission', 'permission',
{ {
state: () => ({ state: () => ({
routes: [], routesRes: null,
addRoutes: [], routes: [],
defaultRoutes: [], addRoutes: [],
topbarRouters: [], defaultRoutes: [],
sidebarRouters: [] topbarRouters: [],
}), sidebarRouters: []
actions: { }),
setRoutes(routes) { actions: {
this.addRoutes = routes setRoutesRes(res) {
this.routes = constantRoutes.concat(routes) this.routesRes = cloneDeep(res)
}, },
setDefaultRoutes(routes) { setRoutes(routes) {
this.defaultRoutes = constantRoutes.concat(routes) this.addRoutes = routes
}, this.routes = constantRoutes.concat(routes)
setTopbarRoutes(routes) { },
this.topbarRouters = routes setDefaultRoutes(routes) {
}, this.defaultRoutes = constantRoutes.concat(routes)
setSidebarRouters(routes) { },
this.sidebarRouters = routes setTopbarRoutes(routes) {
}, this.topbarRouters = routes
generateRoutes(roles) { },
return new Promise(resolve => { setSidebarRouters(routes) {
// 向后端请求路由数据 this.sidebarRouters = routes
getRouters().then(res => { },
const sdata = JSON.parse(JSON.stringify(res.data)) generateRoutes(roles) {
const rdata = JSON.parse(JSON.stringify(res.data)) return new Promise(resolve => {
const defaultData = JSON.parse(JSON.stringify(res.data)) // 向后端请求路由数据
const sidebarRoutes = filterAsyncRouter(sdata) getRouters().then(res => {
const rewriteRoutes = filterAsyncRouter(rdata, false, true) if (!this.routesRes) {
const defaultRoutes = filterAsyncRouter(defaultData) this.setRoutesRes(res)
const asyncRoutes = filterDynamicRoutes(dynamicRoutes) }
asyncRoutes.forEach(route => { router.addRoute(route) }) const sdata = JSON.parse(JSON.stringify(res.data))
this.setRoutes(rewriteRoutes) const rdata = JSON.parse(JSON.stringify(res.data))
this.setSidebarRouters(constantRoutes.concat(sidebarRoutes)) const defaultData = JSON.parse(JSON.stringify(res.data))
this.setDefaultRoutes(sidebarRoutes) const sidebarRoutes = filterAsyncRouter(sdata)
this.setTopbarRoutes(defaultRoutes) const rewriteRoutes = filterAsyncRouter(rdata, false, true)
resolve(rewriteRoutes) const defaultRoutes = filterAsyncRouter(defaultData)
}) const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
}) asyncRoutes.forEach(route => {
} router.addRoute(route)
} })
}) this.setRoutes(rewriteRoutes)
this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
this.setDefaultRoutes(sidebarRoutes)
this.setTopbarRoutes(defaultRoutes)
resolve(rewriteRoutes)
})
})
}
}, persist: [
{paths: ['routesRes'], storage: localStorage}
]
})
// 遍历后台传来的路由字符串，转换为组件对象 // 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) { function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
return asyncRouterMap.filter(route => { return asyncRouterMap.filter(route => {
if (type && route.children) { if (type && route.children) {
route.children = filterChildren(route.children) route.children = filterChildren(route.children)
} }
if (route.component) { if (route.component) {
// Layout ParentView 组件特殊处理 // Layout ParentView 组件特殊处理
if (route.component === 'Layout') { if (route.component === 'Layout') {
route.component = Layout route.component = Layout
} else if (route.component === 'ParentView') { } else if (route.component === 'ParentView') {
route.component = ParentView route.component = ParentView
} else if (route.component === 'InnerLink') { } else if (route.component === 'InnerLink') {
route.component = InnerLink route.component = InnerLink
} else { } else {
route.component = loadView(route.component) route.component = loadView(route.component)
} }
} }
if (route.children != null && route.children && route.children.length) { if (route.children != null && route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, route, type) route.children = filterAsyncRouter(route.children, route, type)
} else { } else {
delete route['children'] delete route['children']
delete route['redirect'] delete route['redirect']
} }
return true return true
}) })
} }
function filterChildren(childrenMap, lastRouter = false) { function filterChildren(childrenMap, lastRouter = false) {
var children = [] var children = []
childrenMap.forEach((el, index) => { childrenMap.forEach((el, index) => {
if (el.children && el.children.length) { if (el.children && el.children.length) {
if (el.component === 'ParentView' && !lastRouter) { if (el.component === 'ParentView' && !lastRouter) {
el.children.forEach(c => { el.children.forEach(c => {
c.path = el.path + '/' + c.path c.path = el.path + '/' + c.path
if (c.children && c.children.length) { if (c.children && c.children.length) {
children = children.concat(filterChildren(c.children, c)) children = children.concat(filterChildren(c.children, c))
return return
} }
children.push(c) children.push(c)
}) })
return return
} }
} }
if (lastRouter) { if (lastRouter) {
el.path = lastRouter.path + '/' + el.path el.path = lastRouter.path + '/' + el.path
} }
children = children.concat(el) children = children.concat(el)
}) })
return children return children
} }
// 动态路由遍历，验证是否具备权限 // 动态路由遍历，验证是否具备权限
export function filterDynamicRoutes(routes) { export function filterDynamicRoutes(routes) {
const res = [] const res = []
routes.forEach(route => { routes.forEach(route => {
if (route.permissions) { if (route.permissions) {
if (auth.hasPermiOr(route.permissions)) { if (auth.hasPermiOr(route.permissions)) {
res.push(route) res.push(route)
} }
} else if (route.roles) { } else if (route.roles) {
if (auth.hasRoleOr(route.roles)) { if (auth.hasRoleOr(route.roles)) {
res.push(route) res.push(route)
} }
} }
}) })
return res return res
} }
export const loadView = (view) => { export const loadView = (view) => {
let res; let res;
for (const path in modules) { for (const path in modules) {
const dir = path.split('views/')[1].split('.vue')[0]; const dir = path.split('views/')[1].split('.vue')[0];
if (dir === view) { if (dir === view) {
res = () => modules[path](); res = () => modules[path]();
}
} }
} return res;
return res;
} }
export default usePermissionStore export default usePermissionStore

13
src/store/modules/user.js
View File

@ -1,6 +1,7 @@
import {getInfo, login, logout} from '@/api/login' import {getInfo, login, logout} from '@/api/login'
import {getToken, removeToken, setToken} from '@/utils/auth' import {getToken, removeToken, setToken} from '@/utils/auth'
import defAva from '@/assets/images/profile.jpg' import defAva from '@/assets/images/profile.jpg'
import {cloneDeep} from "lodash-es";
const useUserStore = defineStore( const useUserStore = defineStore(
'user', 'user',
@ -11,9 +12,13 @@ const useUserStore = defineStore(
avatar: '', avatar: '',
roles: [], roles: [],
tenant: '', tenant: '',
permissions: [] permissions: [],
userInfoRes: null
}), }),
actions: { actions: {
setUserInfoRes(res) {
this.userInfoRes = cloneDeep(res)
},
// 登录 // 登录
login(userInfo) { login(userInfo) {
const username = userInfo.username.trim() const username = userInfo.username.trim()
@ -36,6 +41,9 @@ const useUserStore = defineStore(
getInfo() { getInfo() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getInfo().then(res => { getInfo().then(res => {
if (!this.userInfoRes) {
this.setUserInfoRes(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;
@ -60,6 +68,7 @@ const useUserStore = defineStore(
this.token = '' this.token = ''
this.roles = [] this.roles = []
this.permissions = [] this.permissions = []
this.userInfoRes = null
removeToken() removeToken()
resolve() resolve()
}).catch(error => { }).catch(error => {
@ -69,7 +78,7 @@ const useUserStore = defineStore(
} }
}, },
persist: [ persist: [
{paths: ['tenant'],storage:localStorage} {paths: ['tenant', 'userInfoRes'], storage: localStorage}
] ]
}, },
) )