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中获得route参数，一个可行的解决方案是将导航放置在每个子组件中。我不喜欢这种解决方案，但目前可以解决。

生成带有令牌的链接

0 个答案: