Angular Routing Home组件仅在我单击时起作用

问题描述

我现在正在为一个奇怪的情况感到烦恼。我正在尝试创建一个简单的身份验证应用程序。到目前为止还可以。

在我的应用程序中，我将登录验证发送到使用Express创建的后端。然后，它确认并向前端发送好的响应。这是问题所在。登录后尝试单击主页时，它会正确显示主页：

https://prnt.sc/umn5tx

但是当我尝试将浏览器定位到“ http：// localhost：4200 /”时，它没有显示已将homehome路径设置为''的home组件：

https://prnt.sc/umn7u5

它应该显示它，因为。所以这是代码：

应用程序路由模块

const routes: Routes = [
  {
    path: '',component: HomeComponent,canActivate: [AuthGuard]
  },{
    path: 'login',component: LoginComponent
  },{
    path: 'register',component: RegisterComponent
  }
];

Auth Guard

canActivate(): boolean {
    if(this._cookieService.get('access_token')) {
      return this._authService.loggedIn();
    } else {
      this._router.navigate(['login']);
      return false;
    }
    
  }

这是验证服务

 _registerURI = 'http://localhost:3000/auth/register';
  _loginURI = 'http://localhost:3000/auth/login';
  _token = 'http://localhost:3000/auth/VpW02cG0W2vGeGXs8DdLIq3dQ62qMd0';
  isIt: boolean = false;

  token = {};
  user = {
    name: ''
  };

  constructor(
    private http: HttpClient,private _cookieService: CookieService) { }

  registerUser(user) {
    return this.http.post<any>(this._registerURI,user,{withCredentials: true});
  };

  loginUser(user) {
    return this.http.post<any>(this._loginURI,{withCredentials: true});
  };

  getToken() { // this is for the validation of token
    return this.http.post<any>(this._token,this.token,{responseType: 'json',withCredentials: true});
  }

  loggedIn(): boolean {
    this.getToken().subscribe(res => {
      if(res.success === true){
        this.isIt = true;
      }
    },err => {
      if(err.status === 401){
      this.isIt = false;
      alert('You need to sign in.');
      }
      console.log(err);
    })

    return this.isIt;
  }

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）