时间戳

首页 > 解决方案 > 如何从服务器实现动态路由而不会刷新失败？

angular - 如何从服务器实现动态路由而不会刷新失败？

问题描述

我的应用程序的权限动态来自服务器，所以我想到的自然实现是在我按下导航栏中任何项目的 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 服务中的代码时，路由器服务或任何自定义服务未定义

我的角度问题有什么解决方案吗

标签： angulartypescriptrouting

解决方案

您可以使用angular route guards代替动态路由。特别是看canActivate。

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

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

推荐阅读