Question

我有一个带有简单路由器的小型Angular 6应用；

const appRoutes:Routes = [
 {
   path: '',
   component: LoginComponent
 },  
 {
   path: 'order-input/:ref/:name/:repref',
   //canActivate: [AuthguardGuard],
   component: OrderInputComponent
  },
  {
   path: 'order-input',
   canActivate: [AuthguardGuard],
   component: OrderInputComponent
 },  
 {
  path: 'trad-verify',
  canActivate: [AuthguardGuard],
  component: TradVerifyComponent
 },
 {
  path: '**',
  component: LoginComponent
 } 
]

我遇到一个问题，如果我打开浏览器并键入或粘贴对应于应用程序中页面之一的URL，该页面会加载（订单输入），但通过服务向服务器的请求似乎陷入“待处理”状态，并且不会返回任何数据。

如果我点击刷新，一切都会好起来，并且我会得到数据。

如果我转到主页（localhost：4200），则打开一个新选项卡并键入或粘贴相同的URL，一切正常。我有点困惑。有人可以帮忙吗？

这是授权人

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from 
'@angular/router';
import { Observable } from 'rxjs';
import { UserService } from './user.service';
import { Router, Routes } from '@angular/router';
import { LocalStorageService } from './local-storage.service';

@Injectable({
providedIn: 'root'
})
export class AuthguardGuard implements CanActivate {
  constructor( private user: UserService,
           private router: Router,
           private localStorageService: LocalStorageService) {}

  canActivate(
    next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

let returnValue: boolean;

console.log("LoggedIn: ", this.localStorageService.getFromLocal('repref'))    

if (this.user.getUserLoggedIn()){
  return true;
}

if (this.localStorageService.getFromLocal('repref') != "" && this.localStorageService.getFromLocal('repref') != null) {
  return true;
}
  this.router.navigate(['']);  
  return false;

  }
}

这是订单输入的ngOninit；

ngOnInit() {

  //pickup the ref, name from the url param
  this.route.paramMap.subscribe((params: ParamMap) => {

...
  this.addressXref.getAddress(ref).subscribe(address => {
    this.xrefAddress = address["AddressXref"];

    for (let i in this.xrefAddress) {
      this.addressListItems.push({name: this.xrefAddress[i]["Name"], number: this.xrefAddress[i]["Number"]});
    }

    if (this.addressListItems.length  == 1) {
      this.selectedValue = this.addressListItems[0]["number"];
      this.addressNumber = this.selectedValue.toString();
    }

  })

用户服务；

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable, throwError } from "rxjs";
import { map, filter, catchError, mergeMap } from 'rxjs/operators';

import { CONFIGURATION } from './configuration';

import { GlobalsService } from './globals.service';

import { LocalStorageService } from './local-storage.service';

@Injectable({
  providedIn: 'root'
})

export class UserService {

  private _http : HttpClient;
....

  isValidUser(user, password) : Observable<any> {

    let loginService:string; 

    loginService = CONFIGURATION.serviceUrl + CONFIGURATION.loginService;
    loginService = loginService.replace("^1", user);
    loginService = loginService.replace("^2", password);
    loginService = loginService.replace("^3", Math.random().toString());

    return this._http.get(loginService, {withCredentials: true, responseType: 'json'})
    .pipe(
      map((val: any[]) => {

        if (val.hasOwnProperty("GoldUser")) {
          if (val["GoldUser"][0]["_Qy"] == "GoldSecurityUser") {
            this.setUserLoggedIn();
            this.setUserName(user);
            this.globalsService.personRef = val["GoldUser"][0]["PersonRef"];
            this.localStorageService.saveInLocal("repref", this.globalsService.personRef)
            return val;
          }
        }
        this.isUserLoggedIn = false;
        return false;
      }), catchError( error => { 
          console.log("error",error );
          alert("Invalid login details supplied");
          return throwError( 'Something went wrong with isValidUser!' )
        })
    );
  }
}

getUserLoggedIn() {
  return this.isUserLoggedIn;
}

谢谢

标记。

Answer 1

您应按照以下说明使服务器将所有请求重定向到index.html： https://angular.io/guide/deployment

Angular 6问题（页面需要刷新才能从服务器返回数据）

1 个答案: