feat: 产品菜单路由权限
This commit is contained in:
@ -21,7 +21,7 @@ export function configAutoImport() {
|
||||
'@vueuse/core',
|
||||
{
|
||||
dayjs: [['default', 'dayjs']],
|
||||
'lodash-es': ['cloneDeep', 'omit', 'pick', 'union', 'isNumber'],
|
||||
'lodash-es': ['cloneDeep', 'omit', 'pick', 'union', 'isNumber', 'uniqBy'],
|
||||
'@/hooks': ['useModal'],
|
||||
},
|
||||
],
|
||||
|
||||
13
src/App.vue
13
src/App.vue
@ -8,6 +8,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/stores';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
|
||||
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
|
||||
|
||||
@ -20,14 +21,18 @@ const redTheme = {
|
||||
colorLink: '#f5222d', // 链接色
|
||||
},
|
||||
};
|
||||
// 初始化企业信息
|
||||
|
||||
const init = async () => {
|
||||
const { isLogin, fetchUserInfo } = userStore;
|
||||
const { updateEnterpriseInfo } = enterpriseStore;
|
||||
const { isLogin, getUserInfo } = userStore;
|
||||
const { getUserEnterpriseInfo } = enterpriseStore;
|
||||
const sidebarStore = useSidebarStore();
|
||||
|
||||
if (isLogin) {
|
||||
await fetchUserInfo();
|
||||
await updateEnterpriseInfo();
|
||||
await getUserInfo(); // 初始化用户信息
|
||||
await getUserEnterpriseInfo(); // 初始化企业信息
|
||||
sidebarStore.getUserNavbarMenuList(); // 初始化navbar菜单
|
||||
userStore.getUserAllowAccessRoutes(); // 初始化允许访问的路由
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/*
|
||||
* @Author: 田鑫
|
||||
* @Date: 2023-02-17 11:58:44
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2025-07-05 17:59:59
|
||||
* @LastEditors: rd 1344903914@qq.com
|
||||
* @LastEditTime: 2025-07-08 14:50:57
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
@ -42,13 +42,12 @@ export class Request {
|
||||
this.instance.interceptors.request.use(
|
||||
(config: AxiosRequestConfig) => {
|
||||
const store = useEnterpriseStore(pinia);
|
||||
const enterprise = store.getEnterpriseInfo();
|
||||
|
||||
const token = localStorage.getItem('accessToken') as string;
|
||||
config.headers!.Authorization = token;
|
||||
|
||||
if (enterprise) {
|
||||
config.headers!['enterprise-id'] = enterprise.id;
|
||||
if (store.enterpriseInfo) {
|
||||
config.headers!['enterprise-id'] = store.enterpriseInfo.id;
|
||||
}
|
||||
|
||||
return config;
|
||||
|
||||
@ -67,7 +67,8 @@ export default defineComponent({
|
||||
};
|
||||
listenerRouteChange((newRoute) => {
|
||||
const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
|
||||
if (requiresAuth && (!hideInMenu || activeMenu)) {
|
||||
// if (requiresAuth && (!hideInMenu || activeMenu)) {
|
||||
if (!hideInMenu || activeMenu) {
|
||||
const menuOpenKeys = findMenuOpenKeys((activeMenu || newRoute.name) as string);
|
||||
const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
|
||||
openKeys.value = [...keySet];
|
||||
|
||||
@ -18,7 +18,6 @@ const sidebarStore = useSidebarStore();
|
||||
const exitAccountModalRef = ref(null);
|
||||
// const selectedKey = ref([]);
|
||||
|
||||
// const enterpriseInfo = enterpriseStore.getEnterpriseInfo();
|
||||
const selectedKey = computed(() => {
|
||||
return [String(sidebarStore.activeMenuId)];
|
||||
});
|
||||
|
||||
13
src/permission/permission.ts
Normal file
13
src/permission/permission.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
|
||||
export function checkRoutePermission(routeName: string) {
|
||||
const userStore = useUserStore();
|
||||
const allowAccessRoutes = userStore.allowAccessRoutes;
|
||||
|
||||
if (!routeName) return false;
|
||||
|
||||
// console.log({ routeName, allowAccessRoutes });
|
||||
const route = allowAccessRoutes.find((route) => route.name === routeName);
|
||||
console.log({ route });
|
||||
return !!route;
|
||||
}
|
||||
@ -5,6 +5,8 @@
|
||||
import type { Router } from 'vue-router';
|
||||
import NProgress from 'nprogress';
|
||||
import { goUserLogin } from '@/utils/user';
|
||||
// import router from '@/router';
|
||||
import { checkRoutePermission } from '@/permission/permission';
|
||||
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
|
||||
@ -13,15 +15,25 @@ export default function setupUserLoginInfoGuard(router: Router) {
|
||||
NProgress.start();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const routeName = to?.name as string;
|
||||
const requiresAuth = to?.meta?.requiresAuth || false;
|
||||
const isLogin = !!userStore.isLogin;
|
||||
const requireLogin = to?.meta?.requireLogin || false;
|
||||
|
||||
if (requiresAuth && !isLogin) {
|
||||
if (requireLogin && !userStore.isLogin) {
|
||||
goUserLogin();
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
if (requiresAuth) {
|
||||
const hasPermission = checkRoutePermission(routeName);
|
||||
if (!hasPermission) {
|
||||
AMessage.error('您没有权限访问该页面');
|
||||
next('/');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
router.afterEach((to) => {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
*/
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { appRoutes } from './routes';
|
||||
import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './routes/base';
|
||||
import { NOT_FOUND_ROUTE } from './routes/base';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
import { MENU_GROUP_IDS } from './constants';
|
||||
@ -21,6 +21,7 @@ export const router = createRouter({
|
||||
component: () => import('@/views/components/login'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
requireLogin: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -29,7 +30,8 @@ export const router = createRouter({
|
||||
component: () => import('@/views/components/workplace'),
|
||||
meta: {
|
||||
hideSidebar: true,
|
||||
requiresAuth: true,
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
id: MENU_GROUP_IDS.WORK_BENCH_ID,
|
||||
},
|
||||
},
|
||||
@ -37,20 +39,22 @@ export const router = createRouter({
|
||||
path: '/permission',
|
||||
name: 'permission',
|
||||
component: () => import('@/views/components/permission/choose-enterprise.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/auth',
|
||||
name: 'auth',
|
||||
component: () => import('@/views/components/permission/auth.vue'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: '/auth',
|
||||
// name: 'auth',
|
||||
// component: () => import('@/views/components/permission/auth.vue'),
|
||||
// meta: {
|
||||
// requiresAuth: false,
|
||||
// requireLogin: true,
|
||||
// },
|
||||
// },
|
||||
...appRoutes,
|
||||
REDIRECT_MAIN,
|
||||
// REDIRECT_MAIN,
|
||||
NOT_FOUND_ROUTE,
|
||||
],
|
||||
scrollBehavior() {
|
||||
|
||||
@ -1,28 +1,35 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import { REDIRECT_ROUTE_NAME } from '@/router/constants';
|
||||
|
||||
export const REDIRECT_MAIN: RouteRecordRaw = {
|
||||
path: '/redirect',
|
||||
name: 'redirect',
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
hideInMenu: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/redirect/:path',
|
||||
name: REDIRECT_ROUTE_NAME,
|
||||
component: () => import('@/layouts/Basic.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
hideInMenu: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// export const REDIRECT_MAIN: RouteRecordRaw = {
|
||||
// path: '/redirect',
|
||||
// name: 'redirect',
|
||||
// meta: {
|
||||
// requiresAuth: false,
|
||||
// requireLogin: false,
|
||||
// hideInMenu: true,
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: '/redirect/:path',
|
||||
// name: REDIRECT_ROUTE_NAME,
|
||||
// component: () => import('@/layouts/Basic.vue'),
|
||||
// meta: {
|
||||
// requiresAuth: false,
|
||||
// requireLogin: false,
|
||||
// hideInMenu: true,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
|
||||
export const NOT_FOUND_ROUTE: RouteRecordRaw = {
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'notFound',
|
||||
component: () => import('@/layouts/NotFound.vue'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
hideInMenu: true,
|
||||
hideSidebar: true,
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type { RouteRecordNormalized } from 'vue-router';
|
||||
import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './base';
|
||||
// import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './base';
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
|
||||
const modules = import.meta.glob('./modules/*.ts', { eager: true });
|
||||
@ -17,6 +17,6 @@ function formatModules(_modules: any, result: RouteRecordNormalized[]) {
|
||||
return result;
|
||||
}
|
||||
|
||||
export const appRoutes: any[] = formatModules(modules, []);
|
||||
export const appRoutes: RouteRecordNormalized[] = formatModules(modules, []);
|
||||
|
||||
// export const appExternalRoutes: RouteRecordNormalized[] = formatModules(externalModules, []);
|
||||
|
||||
@ -15,8 +15,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '全域数据引擎',
|
||||
icon: IconBookmark,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.DATA_ENGINE_ID,
|
||||
},
|
||||
children: [
|
||||
@ -26,6 +26,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '行业热门话题洞察',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/hotTranslation.vue'),
|
||||
@ -36,6 +37,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '行业词云',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/hotCloud.vue'),
|
||||
@ -46,6 +48,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '行业关键词动向',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/keyWord.vue'),
|
||||
@ -56,6 +59,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '用户痛点观察',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/userPainPoints.vue'),
|
||||
@ -66,6 +70,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '重点品牌动向',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'),
|
||||
@ -76,6 +81,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '用户画像',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/userPersona.vue'),
|
||||
|
||||
@ -15,8 +15,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '管理中心',
|
||||
icon: IconBookmark,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.MANAGEMENT_ID,
|
||||
},
|
||||
children: [
|
||||
@ -27,6 +27,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '个人信息',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
},
|
||||
@ -37,6 +38,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '企业信息',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
},
|
||||
@ -47,6 +49,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账号管理',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
},
|
||||
|
||||
@ -19,8 +19,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '品牌资产管理',
|
||||
icon: IconRepository,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
@ -30,6 +30,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '品牌信息',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/brands/brand-materials/index.vue'),
|
||||
@ -44,8 +45,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '账号资源中心',
|
||||
icon: IconMediaAccount,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
@ -55,6 +56,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账号管理',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/media-account/account-manage'),
|
||||
@ -65,6 +67,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账号数据看板',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/media-account/account-dashboard'),
|
||||
@ -75,6 +78,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账号详情',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
hideInMenu: true,
|
||||
activeMenu: 'MediaAccountAccountDashboard',
|
||||
@ -91,8 +95,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '投放资源中心',
|
||||
icon: IconPutAccount,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
@ -102,6 +106,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账户管理',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/put-account/account-manage'),
|
||||
@ -112,6 +117,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账户数据',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/put-account/account-data'),
|
||||
@ -122,6 +128,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '投放表现分析',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/put-account/account-dashboard'),
|
||||
@ -132,6 +139,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '平台投放指南',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/put-account/investment-guidelines'),
|
||||
@ -146,8 +154,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '智能方案管理',
|
||||
icon: IconIntelligentSolution,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
@ -157,6 +165,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '业务洞察报告',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport'),
|
||||
@ -167,6 +176,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '竟品对比报告',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport'),
|
||||
|
||||
1
src/router/typeings.d.ts
vendored
1
src/router/typeings.d.ts
vendored
@ -14,5 +14,6 @@ declare module 'vue-router' {
|
||||
noAffix?: boolean; // if set true, the tag will not affix in the tab-bar
|
||||
ignoreCache?: boolean; // if set true, the page will not be cached
|
||||
hideSidebar?: boolean;
|
||||
requireLogin?: boolean; // 是否需要登陆才能访问
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { fetchEnterpriseInfo } from '@/api/all/login';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
import { glsWithCatch, slsWithCatch, rlsWithCatch } from '@/utils/stroage';
|
||||
|
||||
interface EnterpriseInfo {
|
||||
id: number;
|
||||
@ -17,24 +19,14 @@ interface EnterpriseState {
|
||||
|
||||
export const useEnterpriseStore = defineStore('enterprise', {
|
||||
state: (): EnterpriseState => ({
|
||||
enterpriseInfo: (() => {
|
||||
const stored = localStorage.getItem('enterpriseInfo');
|
||||
if (stored) {
|
||||
try {
|
||||
return JSON.parse(stored) as EnterpriseInfo;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})(),
|
||||
enterpriseInfo: (glsWithCatch('enterpriseInfo') && JSON.parse(glsWithCatch('enterpriseInfo') as string)) || null,
|
||||
}),
|
||||
actions: {
|
||||
setEnterpriseInfo(enterpriseInfo: EnterpriseInfo) {
|
||||
this.enterpriseInfo = enterpriseInfo;
|
||||
localStorage.setItem('enterpriseInfo', JSON.stringify(enterpriseInfo));
|
||||
slsWithCatch('enterpriseInfo', JSON.stringify(enterpriseInfo));
|
||||
},
|
||||
clearEnterpriseInfo() {
|
||||
clearUserEnterpriseInfo() {
|
||||
this.enterpriseInfo = null;
|
||||
localStorage.removeItem('enterpriseInfo');
|
||||
},
|
||||
@ -53,17 +45,12 @@ export const useEnterpriseStore = defineStore('enterprise', {
|
||||
this.enterpriseInfo.used_sub_account_count++;
|
||||
}
|
||||
},
|
||||
getEnterpriseInfo(): EnterpriseInfo | null {
|
||||
return this.enterpriseInfo;
|
||||
},
|
||||
async updateEnterpriseInfo() {
|
||||
const sidebarStore = useSidebarStore();
|
||||
|
||||
const res = await fetchEnterpriseInfo(this.enterpriseInfo!.id);
|
||||
const { code, data } = res;
|
||||
if (code === 200) {
|
||||
this.setEnterpriseInfo(data);
|
||||
sidebarStore.getNavbarMenuList();
|
||||
async getUserEnterpriseInfo() {
|
||||
if (this.enterpriseInfo) {
|
||||
const { code, data } = await fetchEnterpriseInfo(this.enterpriseInfo!.id);
|
||||
if (code === 200) {
|
||||
this.setEnterpriseInfo(data);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,15 +1,25 @@
|
||||
/*
|
||||
* @Author: rd 1344903914@qq.com
|
||||
* @Date: 2025-07-08 11:22:05
|
||||
* @LastEditors: rd 1344903914@qq.com
|
||||
* @LastEditTime: 2025-07-08 14:06:41
|
||||
* @FilePath: /lingji-work-fe/src/stores/modules/side-bar/constants.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
export const MENU_LIST = [
|
||||
{
|
||||
id: MENU_GROUP_IDS.WORK_BENCH_ID,
|
||||
name: '工作台',
|
||||
pathName: 'Home',
|
||||
requiresAuth: false,
|
||||
permissionKey: '', // 权限key,如果为空,则表示该菜单不需要权限,与后端约定
|
||||
},
|
||||
{
|
||||
id: MENU_GROUP_IDS.DATA_ENGINE_ID,
|
||||
name: '全域数据分析',
|
||||
permissionKey: 'data_analysis',
|
||||
requiresAuth: true,
|
||||
children: [
|
||||
{
|
||||
name: '行业热门话题洞察',
|
||||
@ -41,6 +51,7 @@ export const MENU_LIST = [
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
name: '营销资产中台',
|
||||
permissionKey: 'marketing_asset',
|
||||
requiresAuth: true,
|
||||
children: [
|
||||
{
|
||||
name: '品牌资产管理',
|
||||
|
||||
@ -11,12 +11,15 @@ import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
interface sidebarState {
|
||||
activeMenuId: number | null;
|
||||
menuList: any[];
|
||||
allowAccessRoutes: any[];
|
||||
}
|
||||
|
||||
export const useSidebarStore = defineStore('sidebar', {
|
||||
state: (): sidebarState => ({
|
||||
activeMenuId: null,
|
||||
menuList: [],
|
||||
|
||||
allowAccessRoutes: [], // 允许访问的路由列表
|
||||
}),
|
||||
actions: {
|
||||
clearActiveMenuId() {
|
||||
@ -25,12 +28,14 @@ export const useSidebarStore = defineStore('sidebar', {
|
||||
setActiveMenuId(id: number) {
|
||||
this.activeMenuId = id;
|
||||
},
|
||||
clearUserNavbarMenuList() {
|
||||
this.menuList = [];
|
||||
},
|
||||
// navbar菜单列表由企业对应权限决定
|
||||
getNavbarMenuList() {
|
||||
getUserNavbarMenuList() {
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const enterpriseInfo = enterpriseStore.getEnterpriseInfo();
|
||||
this.menuList = MENU_LIST.filter(
|
||||
(item) => !item.permissionKey || enterpriseInfo?.permissions?.includes(item.permissionKey),
|
||||
(item) => !item.permissionKey || enterpriseStore.enterpriseInfo?.permissions?.includes(item.permissionKey),
|
||||
);
|
||||
},
|
||||
// 根据当前路由自动设置 activeMenuId
|
||||
@ -61,7 +66,7 @@ export const useSidebarStore = defineStore('sidebar', {
|
||||
return null;
|
||||
};
|
||||
|
||||
const menuId = findMenuGroup(appRoutes);
|
||||
const menuId = findMenuGroup(appRoutes as any);
|
||||
if (menuId !== null) {
|
||||
this.activeMenuId = menuId;
|
||||
}
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
import type { RouteRecordNormalized } from 'vue-router';
|
||||
|
||||
import { defineStore } from 'pinia';
|
||||
import { fetchProfileInfo } from '@/api/all/login';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import router from '@/router';
|
||||
import { glsWithCatch, slsWithCatch, rlsWithCatch } from '@/utils/stroage';
|
||||
|
||||
interface UserInfo {
|
||||
id: number;
|
||||
@ -10,16 +15,10 @@ interface UserInfo {
|
||||
// 添加其他用户属性...
|
||||
}
|
||||
|
||||
interface CompanyInfo {
|
||||
id: number;
|
||||
name: string;
|
||||
// 添加其他公司属性...
|
||||
}
|
||||
|
||||
interface UserState {
|
||||
token: string;
|
||||
userInfo: UserInfo | null;
|
||||
companyInfo: CompanyInfo | null;
|
||||
allowAccessRoutes: RouteRecordNormalized[];
|
||||
// isLogin: boolean;
|
||||
}
|
||||
|
||||
@ -31,9 +30,10 @@ interface UserInfo {
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: (): UserState => ({
|
||||
token: localStorage.getItem('accessToken') || '',
|
||||
userInfo: null,
|
||||
companyInfo: null,
|
||||
token: glsWithCatch('accessToken') || '',
|
||||
userInfo: (glsWithCatch('userInfo') && JSON.parse(glsWithCatch('userInfo') as string)) || null,
|
||||
allowAccessRoutes:
|
||||
(glsWithCatch('allowAccessRoutes') && JSON.parse(glsWithCatch('allowAccessRoutes') as string)) || [], // 允许访问的路由列表
|
||||
}),
|
||||
getters: {
|
||||
isLogin(): boolean {
|
||||
@ -44,12 +44,12 @@ export const useUserStore = defineStore('user', {
|
||||
// 设置 Token
|
||||
setToken(token: string) {
|
||||
this.token = `Bearer ${token}`;
|
||||
localStorage.setItem('accessToken', this.token);
|
||||
slsWithCatch('accessToken', this.token);
|
||||
},
|
||||
|
||||
deleteToken() {
|
||||
this.token = '';
|
||||
localStorage.removeItem('accessToken');
|
||||
rlsWithCatch('accessToken');
|
||||
},
|
||||
|
||||
// 获取 Token
|
||||
@ -60,14 +60,54 @@ export const useUserStore = defineStore('user', {
|
||||
// 设置用户信息
|
||||
setUserInfo(userInfo: UserInfo | null) {
|
||||
this.userInfo = userInfo;
|
||||
slsWithCatch('userInfo', JSON.stringify(userInfo));
|
||||
},
|
||||
clearUserInfo() {
|
||||
this.userInfo = null;
|
||||
rlsWithCatch('userInfo');
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
async fetchUserInfo() {
|
||||
async getUserInfo() {
|
||||
const { code, data } = await fetchProfileInfo();
|
||||
if (code === 200) {
|
||||
this.setUserInfo(data);
|
||||
}
|
||||
},
|
||||
clearUserAllowAccessRoutes() {
|
||||
this.allowAccessRoutes = [];
|
||||
rlsWithCatch('allowAccessRoutes');
|
||||
},
|
||||
getUserAllowAccessRoutes() {
|
||||
const sidebarStore = useSidebarStore();
|
||||
const menuList = sidebarStore.menuList;
|
||||
|
||||
const appRoutes = router.getRoutes();
|
||||
|
||||
appRoutes.forEach((route: any) => {
|
||||
if (!route.meta?.requiresAuth) {
|
||||
this.allowAccessRoutes.push(route);
|
||||
}
|
||||
});
|
||||
|
||||
menuList.forEach((item) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach((child: any) => {
|
||||
const matchedRoute = appRoutes.find((route: any) => route.name === child.pathName);
|
||||
if (matchedRoute) {
|
||||
this.allowAccessRoutes.push(matchedRoute);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const matchedRoute = appRoutes.find((route: any) => route.name === item.pathName);
|
||||
if (matchedRoute) {
|
||||
this.allowAccessRoutes.push(matchedRoute);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.allowAccessRoutes = uniqBy(this.allowAccessRoutes, 'name');
|
||||
slsWithCatch('allowAccessRoutes', JSON.stringify(this.allowAccessRoutes));
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
47
src/utils/stroage.ts
Normal file
47
src/utils/stroage.ts
Normal file
@ -0,0 +1,47 @@
|
||||
export const glsWithCatch = (key: string) => {
|
||||
try {
|
||||
return localStorage?.getItem(key);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const slsWithCatch = (key: string, value: any) => {
|
||||
try {
|
||||
localStorage?.setItem(key, value);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const rlsWithCatch = (key: string) => {
|
||||
try {
|
||||
localStorage?.removeItem(key);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const gssWithCatch = (key: string) => {
|
||||
try {
|
||||
return sessionStorage?.getItem(key);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const sssWithCatch = (key: string, value: any) => {
|
||||
try {
|
||||
sessionStorage?.setItem(key, value);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const rssWithCatch = (key: string) => {
|
||||
try {
|
||||
sessionStorage?.removeItem(key);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
@ -15,6 +15,15 @@ export function goUserLogin(query?: any) {
|
||||
|
||||
// 登录处理
|
||||
export async function handleUserLogin() {
|
||||
const userStore = useUserStore();
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const sidebarStore = useSidebarStore();
|
||||
|
||||
await userStore.getUserInfo(); // 初始化用户信息
|
||||
await enterpriseStore.getUserEnterpriseInfo(); // 初始化企业信息
|
||||
sidebarStore.getUserNavbarMenuList(); // 初始化navbar菜单
|
||||
userStore.getUserAllowAccessRoutes(); // 初始化允许访问的路由
|
||||
|
||||
handleUserHome();
|
||||
}
|
||||
|
||||
@ -28,9 +37,13 @@ export function handleUserLogout() {
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const sidebarStore = useSidebarStore();
|
||||
|
||||
userStore.deleteToken();
|
||||
enterpriseStore.clearEnterpriseInfo();
|
||||
userStore.clearUserInfo();
|
||||
enterpriseStore.clearUserEnterpriseInfo();
|
||||
sidebarStore.clearUserNavbarMenuList();
|
||||
userStore.clearUserAllowAccessRoutes();
|
||||
|
||||
sidebarStore.clearActiveMenuId();
|
||||
userStore.deleteToken();
|
||||
|
||||
goUserLogin();
|
||||
}
|
||||
|
||||
@ -225,7 +225,6 @@ const clearError = (field: string) => {
|
||||
const handleOk = async () => {
|
||||
visible.value = false;
|
||||
|
||||
await enterpriseStore.updateEnterpriseInfo();
|
||||
handleUserLogin();
|
||||
};
|
||||
|
||||
@ -273,7 +272,6 @@ const getProfileInfo = async () => {
|
||||
|
||||
if (enterprises.length > 0) {
|
||||
if (enterprises.length === 1) {
|
||||
await enterpriseStore.updateEnterpriseInfo();
|
||||
handleUserLogin();
|
||||
} else {
|
||||
// 多个企业时候需要弹窗让用户选择企业
|
||||
|
||||
@ -99,7 +99,7 @@ const addAccountVisible = ref(false);
|
||||
const deleteVisible = ref(false);
|
||||
const deleteTitle = ref('');
|
||||
|
||||
const enterpriseInfo = store.getEnterpriseInfo();
|
||||
const enterpriseInfo = store.enterpriseInfo;
|
||||
|
||||
const okText = computed(() => {
|
||||
if (!canAddAccount.value) {
|
||||
|
||||
@ -48,7 +48,7 @@ const form = reactive({
|
||||
name: '',
|
||||
});
|
||||
|
||||
const enterpriseInfo = store.getEnterpriseInfo();
|
||||
const enterpriseInfo = store.enterpriseInfo;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
||||
@ -102,7 +102,7 @@ const enterpriseStore = useEnterpriseStore();
|
||||
const handleTrial = async (id: any) => {
|
||||
const { code } = await trialProduct(id);
|
||||
if (code === 200) {
|
||||
enterpriseStore.updateEnterpriseInfo();
|
||||
enterpriseStore.getUserEnterpriseInfo();
|
||||
AMessage.success('试用成功!');
|
||||
emit('refresh');
|
||||
}
|
||||
|
||||
@ -191,7 +191,6 @@ const getHealthData = async () => {
|
||||
const { code, data } = await getMediaAccountsHealth();
|
||||
if (code === 200) {
|
||||
healthData.value = data;
|
||||
console.log(healthData.value);
|
||||
}
|
||||
};
|
||||
const getAccountData = async () => {
|
||||
|
||||
@ -40,7 +40,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
// 目标地址
|
||||
target: 'https://lingjiapi.lvfunai.com/api',
|
||||
// target: 'https://lingjiapi.lvfunai.com/api',
|
||||
target: 'http://192.168.40.12/api',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user