首页 > 解决方案 > Angular - 应用程序再次将我重定向回登录页面

问题描述

目前,我正在使用 Angular-7 开发一个 Web 应用程序。我有登录和主页。登录页面位于主页之前:

登录组件.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../shared/services/api.service';
import { TokenService } from '../../../shared/services/token.service';
import { Router, Route } from '@angular/router';
import { AuthService } from '../../../shared/services/auth.service';
import { SnotifyService } from 'ng-snotify';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

declare var $;

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

public loggedIn: boolean;

 public form = {
  email : null,
  password : null,
  remember_me : false
};

student = null;
name = null;
students = null;

public error = null;

constructor(
 private api: ApiService,
 private token: TokenService,
 private router: Router,
 private auth: AuthService,
 private notify: SnotifyService,
 private spinnerService: Ng4LoadingSpinnerService
 ) {}

ngOnInit() {


document.body.className = 'hold-transition login-page';
$(() => {
  $('input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%' /* optional */
   });
 });
}

onSubmit(){
 this.notify.info('Wait...', {timeout: 0});
 this.spinnerService.show();
 var headers = {
   'Content-Type' : 'application/json'
 }
 return this.api.post('login', this.form, headers).subscribe(
   data => this.tokenHandler(data),
   error => this.errorHandler(error.error)
  );
 }

errorHandler(error){
  this.spinnerService.hide();
  this.notify.clear();
  console.log(error);
  if(error.errors && error.errors.email){
  this.error = error.errors.email;
}
else if(error.message=='Unauthorized'){
  this.error = null;
  this.notify.error('Invalid Login Details or email not confirmed', {timeout: 0})
} else {
  this.error = null;
  this.notify.error(error.message, {timeout:0})
}
}

tokenHandler(data){
 this.notify.clear();
 console.log(data);
 this.token.setRoles(data.user.roles);
this.token.set(data.token_type + " " + data.access_token, data);
this.auth.changeAuthStatus(true);
this.loggedIn = true;
 this.notify.info('Login Succesfully', {timeout: 2000});
 this.wait(999);
 this.router.navigateByUrl('/home');
 window.location.reload();
}

private wait(ms){
 var start = new Date().getTime();
 var end = start;
 while(end < start + ms) {
   end = new Date().getTime();
 }
}
}

应用程序路由.module.ts

const routes: Routes = [
{ path: '', redirectTo: '/landing', pathMatch: 'full' },
{ path: 'landing', component: LandingPageComponent },

{
 path: 'login',
 component: LoginComponent
},
{
 path: 'client-quote-landing',
 component: ClientQuotesLandingComponent
},
{
 path: 'home',
 component: HomeComponent,
 canActivate : [AfterloginService]
},

];

当我单击登录页面上的提交时,我希望应用程序将我带到主页。而是,它再次重定向到登录页面。

我该如何解决这个问题?

标签: angular

解决方案


我不确定,但我认为你不应该在方法中使用 window.location.reload() 代码......

请删除并尝试它是否有效...


推荐阅读