如何在不刷新失败的情况下从服务器实现动态路由？

Question

我的应用程序的权限是动态地来自服务器的，因此，我想到的自然实现是在按导航栏中的任何项目的url之前，修改路由器树（使用Router.config）。这是我从服务器获取数据之后按导航栏上的任何项目之前的setRoutes函数：

setRoutes ( data ) {

data.map ( module => {
module.menus.map ( menu => {
            menu.programs.map ( program => {
                programs.push (
                    {
                        moduleCode : module.code ,
                        menuCode : menu.code ,
                        programCode : program.code ,
                        programLabel : program.dsc,
                        formType: program.formType
                    }
                );
            } );
        } );
    } );
});

  let children = programs.filter(program => program.formType == 'DynamicForm').map ( program => {
        if(program.formType == "DynamicForm"){
        return {
            path : program.programCode ,
            children : [
                {
                    path : "edit" ,
                    component : UpdateRecordComponent,
                    data : { program : program }
                } , {
                    path : "queryForm" ,
                    component : DynamicProgramComponent ,
                    data : { program : program }
                } , {
                    path : "add" ,
                    component : AddRecordComponent ,
                    data : { program : program }
                } , {
                    path : "" ,
                    redirectTo : "queryForm"
                }
            ]
        };
    }

    } );
this.router.config.forEach ( route => {
        if ( route.path === "app" ) {
            route.children.forEach ( child => {
                if ( child.path === "main" ) {
                    child.children = [...child.children , ...children];
                }
            } );
        }
    } );

如果我逐步进入应用程序，一切都很好（登录=>填写路线和导航=>按下并导航到特定页面）

我的问题是，当我刷新某个页面上的页面或尝试通过链接访问它时。路由器树变空并且应用抛出错误（无法匹配到URL段的任何路由），然后我才能执行任何代码在url事件开始之前先设置路由。

[我尝试使用APP_INITIALIZER，但是当我尝试执行APP_INITIALIZER服务中的代码时，路由器服务或任何自定义服务未定义

我的角度问题是否有解决方案

Answer 1

可以使用angular route guards代替动态路由。专门看一下canActivate。

canActivate，可以为每个路由或子路由调用，并且期望为布尔值或Observable，它返回布尔值。

这样，您将要做的是，已经定义了路由列表。在您的路由gurad中，您可以最初从服务器获取权限并将其存储在本地（也许是本地存储），然后测试是否允许用户访问该路由。