我正在制作一個 Angular 網站，當將以下引數放在 url 中時會發生奇怪的事情。案例：
?code=sommeText-> 什么都沒有發生?state=sommeText-> 什么都沒有發生?session_state=sommeText-> 什么都沒有發生?code=sommeText&state=someText-> 選單欄消失?code=sommeText&state=someText&randomParam=RansomText-> 選單欄消失?code=sommeText&session_state=someText-> 什么都沒有發生?state=sommeText&session_state=someText-> 什么都沒有發生?code=sommeText&session_state=someText&randomParam=RansomText-> 什么都沒有發生?code=sommeText&state=someText&session_state=someText-> 選單欄消失
導航欄消失了，它唯一包含的是我的名字和一個注銷按鈕。我使用 microsoft 和 OAuth 登錄（這是填寫我的名字的方式）我還從 Microsoft 獲得了 400 的退款，這就是填寫 url 的方式。
我的應用程式的 url 是“localhost:{port}/item”
我接受 url 引數的應用程式沒有意義。
我不是在尋找解決方案，而是為了解釋為什么它只發生在這兩個引數上，是已知問題還是錯誤？
如果我需要放置代碼：請問。我不知道要在此處添加哪些檔案（我不會發布我的完整專案）。
包.json
{
"name": "dds-fe",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular-builders/jest": "~13.0.0",
"@angular/animations": "^14.2.0",
"@angular/cdk": "^14.1.2",
"@angular/common": "^14.2.0",
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/forms": "^14.2.0",
"@angular/localize": "^14.1.2",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0",
"@ngrx/effects": "^14.1.0",
"@ngrx/router-store": "^14.1.0",
"@ngrx/store": "^14.1.0",
"@ngrx/store-devtools": "^14.1.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"ajv": "^8.11.0",
"angular-oauth2-oidc": "^13.0.1",
"jwt-decode": "^3.1.2",
"ngx-extended-pdf-viewer": "^15.0.2",
"primeflex": "^3.2.1",
"primeicons": "^5.0.0",
"primeng": "^14.0.1",
"rxjs": "~7.5.6",
"shallow-render": "^14.1.0",
"tslib": "^2.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.1",
"@angular/cli": "~14.2.1",
"@angular/compiler-cli": "^14.2.0",
"@types/jasmine": "~4.0.0",
"@types/jest": "^27.0.3",
"jest-preset-angular": "^11.0.1",
"jasmine-core": "~4.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"ts-jest": "^29.0.0",
"typescript": "~4.7.2"
}
app.component.html
<app-menu-bar
*ngIf="user$ | async as user"
[username]="user.name"
></app-menu-bar>
<router-outlet></router-outlet>
應用程式路由.module.ts
@Component({
selector: 'app-menu-bar',
templateUrl: './menu-bar.component.html',
styleUrls: ['./menu-bar.component.scss']
})
export class MenuBarComponent implements OnInit {
@Input()
username: string;
items: MenuItem[];
constructor(private readonly translateService: TranslateService, private readonly router: Router,
private readonly oauthService: OAuthService) {
}
ngOnInit(): void {
this.items = [
{
label: this.translateService.instant('MENU.DASHBOARD.LABEL'),
icon: 'pi pi-fw pi-home',
command: () => this.router.navigate([ROUTE_ITEM]),
},
{
label: this.username,
icon: 'pi pi-fw pi-user',
},
];
}
onLogoutClicked() {
this.oauthService.logOut();
}
}
應用程式路由.ts
export const ROUTE_ITEM = 'item';
export const ROUTE_NOT_FOUND = 'not-found';
export const ROUTE_UNAUTHORIZED = 'unauthorized';
export const ROUTE_SERVER_ERROR = 'error';
export const ROUTE_SERVER_UNAVAILABLE = 'server-unavailable';
app.component.ts
@Injectable({
providedIn: 'root',
})
export class AppFacade {
constructor(private store: Store<State>) {
}
get user(): Observable<User> {
return this.store.select(appSelectors.user);
}
}
app.component.html
<app-menu-bar
*ngIf="user$ | async as user"
[username]="user.name"
></app-menu-bar>
<router-outlet></router-outlet>
manu-bar.component.html
<p-menubar [model]="items" styleClass="menubar" >
<ng-template pTemplate="start">
<img src="assets/images/LOGO.png" height="40" width="132.875" class="mr-2" alt="logo">
</ng-template>
<button pButton class="p-button-text text-white" label="{{'MENU.LOGOFF' | translate}}" icon="pi pi-power-off" (click)="onLogoutClicked()"></button>
</p-menubar>
選單欄.component.ts
@Component({
selector: 'app-menu-bar',
templateUrl: './menu-bar.component.html',
styleUrls: ['./menu-bar.component.scss']
})
export class MenuBarComponent implements OnInit {
@Input()
username: string;
items: MenuItem[];
constructor(private readonly translateService: TranslateService, private readonly router: Router,
private readonly oauthService: OAuthService) {
}
ngOnInit(): void {
this.items = [
{
label: this.translateService.instant('MENU.DASHBOARD.LABEL'),
icon: 'pi pi-fw pi-home',
command: () => this.router.navigate([ROUTE_DDS]),
},
{
label: this.username,
icon: 'pi pi-fw pi-user',
},
];
}
onLogoutClicked() {
this.oauthService.logOut();
}
}
uj5u.com熱心網友回復：
我找到了發生這種情況的原因：
我們使用 OAuth 2.0 進行身份驗證。當這些引數 被放置在 url 中時，OAuth 將使用該值來處理它們code。state但這些值不是它期望的資料并引發錯誤。因此，用戶未定義，并且 Angular 無法編譯選單欄（user.name不存在）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/510618.html
標籤：有角度的网址网址参数
上一篇：為什么在定義模型CharField時使用validators=[URLValidator]不會在保存相應的ModelForm時檢查URL有效性？
下一篇：驅動開發：內核字串拷貝與比較