使用令牌生成链接

Question

在 Angular 6 中，我想从 URL 检索 JWT 令牌，将其转换为 Base 64 并将其推送到其他一些链接。

我这样做了：

app-routing.module.ts：

{ path: 'admin/:token', redirectTo: 'admin/:token/dashboard', pathMatch: 'full' }

app.component.ts：

export class AppComponent implements OnInit  {

// JWT TEST TOKEN
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

_token: string = null;
public get Token(): string { return this._token; }
public set Token(value: string) { this._token = value; }


constructor(public route: ActivatedRoute,
            public router: Router) {

    console.log("## App started! ##");

    this.route.params.subscribe((params: Params) => {
        let _token: string = params['token'];
        console.log(_token);
        console.log(this.encodeToken(_token));

        this.Token = this.encodeToken(_token); //btoa(_token);
    });

}

ngOnInit(callback?: () => void) {

}

public encodeToken(token:string) {
    return encodeURI(btoa(token)).replace(/=/g, "#");
}

public decodeToken(codedToken: string) {
    return decodeURI(atob(codedToken.replace(/#/g, "=")));
}
}

app.component.html:

<div style="margin: 1em;">
<sui-tabset>
    <div class="ui pointing secondary menu">
        <a class="item" routerLink="/admin/{{Token}}/dashboard">Dashboard</a>
        <a class="item" routerLink="/admin/{{Token}}/report">Reporting</a>
        <a class="item" routerLink="/admin/{{Token}}/stats">Stats</a>            
    </div>
</sui-tabset>
</div>

<router-outlet></router-outlet>

dashboard.component.ts：

export class DashboardComponent extends AppComponent implements OnInit {

constructor(public route: ActivatedRoute,
    public router: Router) {

    super(route, router);
}

ngOnInit() {        
    console.log(this.Token);
}

}

然而，我的 URL 中的 based64 令牌与仪表板中的 console.log 中显示的转换后的令牌不对应。 链接如下所示：

http://localhost:4200/admin/dW5kZWZpbmVk/dashboard

预期代币：

ZXlKaGJHY2lPaUpJVXpJMU5pSXNJblI1Y0NJNklrcFhWQ0o5LmV5SnpkV0lpT2lJeE1qTTBOVFkzT0Rrd0lpd2libUZ0WlNJNklrcHZhRzRnUkc5bElpd2lhV0YwSWpveE5URTJNak01TURJeWZRLlNmbEt4d1JKU01lS0tGMlFUNGZ3cE1lSmYzNlBPazZ5SlZfYWRRc3N3NWM#

我对dashboard.component.ts中AppComponent的继承感到怀疑。从 URL 检索信息是最佳做法吗？还有其他方法吗？仍然没有找到任何有价值的文档。

我错过了什么？我究竟做错了什么？

[更新]

看来我无法获取AppComponent中的路由参数，一个可行的解决方案是将导航放置在每个子组件中。 我不喜欢这个解决方案，但它现在可以完成工作。

Answer 1

começar 声明 lista_vazia para i variando de 1 até 1000000 faça 在 lista_vazia 中插入勇气 菲姆帕拉 递减形式的订单列表 印记“一个记忆可以快速地实现世界的成功！” 菲姆