前言

在工作中，我们也许会遇到这样的需求，在登录后要选择对应的应用，再根据应用获取相应的菜单，那么如何来实现呢，单独写一个页面大家一定是会的，今天主要讲一下如何来实现登录后自动跳转到对应的路由，而不是系统默认的首页。

今天工作忙，发个库存，第二期明天发。

正文

配置路由地址

在框架中，有一个文件是配置默认路由的地方src/enums/pageEnum.ts，这里配置了登录页面、首页等等

export enum PageEnum {  
    // basic login path  
    BASE_LOGIN = '/login',  
    // basic home path  
    BASE_HOME = '/dashboard',  
    // error page path  
    ERROR_PAGE = '/exception',  
    // error log page path  
    ERROR_LOG_PAGE = '/error-log/list',  
    // system page  新增的系统选择 上面是系统自带的
    SYSTEM = '/system',  
}

页面&&路由

页面创建

创建system文件夹并且写出页面，然后再路由中注册这个页面。

非后端权限路由注册

路由注册如果是再后端权限下，会被后端传来的地址所覆盖，所以，我们需要一个不进行鉴权的路由，如同登录页面，注册的文件是src/router/routes/index.ts，而标题，则可以去src/locales/lang/zh-CN/routes中添加相应的文字

// 应用选择路由  
export const System: AppRouteRecordRaw = {  
    path: '/system',  
    name: 'System',  
    component: () => import('/@/views/sys/system/System.vue'),  
    meta: {  
        title: t('routes.basic.system'),  
    },  
};

export default {  
    login: '登录',  
    errorLogList: '错误日志列表',  
    system: '应用选择',  // 自行添加
};

缓存配置

如果你需要在页面中用到缓存技术，在框架中有文件是配置缓存key的，我们可以按需求去src/enums/cacheEnum.ts添加，在添加好以后不能立马使用，需要去src/utils/cache/persistent.ts中的BasicStore去注册他，即可使用。

// app global key  
export const APP_KEY = 'APP_KEY__';

interface BasicStore {  
    [TOKEN_KEY]: string | number | null | undefined;  
    [USER_INFO_KEY]: UserInfo;  
    [ROLES_KEY]: string[];  
    [LOCK_INFO_KEY]: LockInfo;  
    [PROJ_CFG_KEY]: ProjectConfig;  
    [MULTIPLE_TABS_KEY]: RouteLocationNormalized[];  
    [APP_KEY]: string; // 新增的应用缓存  
}

跳转

我们需要在登录成功后跳转到我们自己新建的一个页面，在上面操作都完成后，就可以在src/store/modules/user.ts中修改跳转的路由，从而实现先跳转到自己的页面。

async afterLoginAction(goHome?: boolean): Promise<GetUserInfoModel | null> {  
    if (!this.getToken) return null;  
    // get user info  
    const userInfo = await this.getUserInfoAction();  

    const sessionTimeout = this.sessionTimeout;  
    if (sessionTimeout) {  
        this.setSessionTimeout(false);  
    } else {  
    const permissionStore = usePermissionStore();  
    if (!permissionStore.isDynamicAddedRoute) {  
        const routes = await permissionStore.buildRoutesAction();  
        routes.forEach((route) => {  
            router.addRoute(route as unknown as RouteRecordRaw);  
        });  
        router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);  
        permissionStore.setDynamicAddedRoute(true);  
        }  
        // goHome && (await router.replace(userInfo?.homePath || PageEnum.BASE_HOME));  
        goHome && (await router.replace(PageEnum.BASE_HOME));  // 将 BASE_HOME 替换成EM
    }  
    return userInfo;  
},

执行

在配置完成后，就可以尝试登录，会发现登录后跳转到了自己的页面，在选择了以后，我后台给出的权限当然这个是临时创建的应用有首页和代码生成的权限，这个时候我们就可以看到了

结尾&&下期预告

结语

在这一章，我们了解了他的路由配置、缓存配置、以及一些路由标题的配置，这就是我们今天要分享的学习记录，欢迎大家在评论区讨论，提问，指正！

从0开始学习 vben admin（在登录后如何新增独立页面）

前言

正文