Мое приложение Angular не перенаправляет на домашнюю страницу после входа в систему

avatar
Damith_009
8 апреля 2018 в 10:34
227
0
0

У меня есть приложение angular 4, и после того, как я применил Router Guard (AuthGuard) к маршруту моей домашней страницы, оно не перенаправляет на домашнюю страницу. Может ли кто-нибудь помочь мне понять, есть ли проблема в моем коде.

часть app.module.ts

RouterModule.forRoot([
      { path: '', component: HomeComponent, canActivate: [AuthGuard]}, 
      { path: 'login-local', component: LoginFormComponent},     
      { path: 'members-signup/:id', 
      component: MembersOnlySignupComponent, 
      canActivate: [AuthGuard, MemberAuthGuard]
      },
      { path: 'members-signup', 
      component: MembersOnlySignupComponent 
      }
      ])],

      providers: [
      AuthService,
      AuthGuard,
      MemberAuthGuard,
      ....
      { provide: APP_INITIALIZER, useFactory: userProviderFactory, deps: [UserService], multi: true }
      ]

}}

export class AppModule {

}

export function userProviderFactory(provider: UserService) {
  return () => {
    let uid = localStorage.getItem('userId');
    let uTypeId = localStorage.getItem('userTypeId');
    if(uid)
    provider.getUserByIdAsPromise(uid);
  }
}

login-form.component.ts

import { Router, ActivatedRoute } from '@angular/router';

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { Location } from '@angular/common';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {
  returnUrl;
  constructor(private auth: AuthService, private route: ActivatedRoute, 
    private router: Router, private location: Location) { }

  ngOnInit() {
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }

  login(credentials) {
    if(credentials) {
      this.auth.loginLocal(credentials.username, credentials.password)
      .then(r => {
        this.router.navigate(['/']);
      })
      .catch(r => {
        this.router.navigate(['/login-local'])
      });

    }
    else {
      this.router.navigate(['/login-local']);
    }
  }

}

метод входа AuthService.ts

асинхронный loginLocal(имя пользователя: строка, пароль: строка) {

let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
localStorage.setItem('returnUrl', returnUrl);

console.log("login credentials > " + username + ", " + password);
let md5Pass = Md5.hashStr(password).toString().trim();

let loggedInUser: User;

this.afs.collection('user', ref => ref.where('username', '==', username)
  .where('password', '==', md5Pass)).snapshotChanges().take(1).subscribe(users => {
    users.map(u => {
      let dispatch = this.ngRedux.dispatch;
      const id = u.payload.doc.id;
      const data = u.payload.doc.data();
      loggedInUser = { id, ...data } as User;

      //store in local storage
      localStorage.setItem('userId', id);
      localStorage.setItem('userTypeId', loggedInUser.usertypeid);

      if (loggedInUser) {
        let fullName = loggedInUser.firstname + ' ' + loggedInUser.lastname;
        if (loggedInUser.clubid) {
          dispatch({
            type: GET_CLUB_USER_LOGIN_STATE,
            payload: {
              displayUserName: fullName,
              userId: loggedInUser.id,
              username: loggedInUser.username,
              photoUrl: loggedInUser.imageurl,
              userTypeId: loggedInUser.usertypeid,
              clubId: loggedInUser.clubid
            }
          });
        }
        else {
          dispatch({
            type: GET_MO_USER_AND_MEMBER_LOGIN_STATE,
            payload: {
              displayUserName: fullName,
              userId: loggedInUser.id,
              username: loggedInUser.username,
              photoUrl: loggedInUser.imageurl,
              userTypeId: loggedInUser.usertypeid
            }
          });
        }

      }
      else {
        console.log('false');
      }
    });
  });

  if(await loggedInUser)
    return loggedInUser;

AuthGuard.ts

@Injectable()
export class AuthGuard implements CanActivate{
  @select('displayUserName') displayUserName;

  constructor(private auth: AuthService, private router: Router) { }

  canActivate(route, state: RouterStateSnapshot) {
    if(localStorage.getItem('userTypeId')) {
      return true;
    }

    this.router.navigate(['/login-local'], {queryParams: {returnUrl: state.url}});
    return false;
  }

}
Источник
Vega
8 апреля 2018 в 10:42
0

localStorage.getItem('userTypeId') вероятно возвращает false

Daniel W Strimpel
8 апреля 2018 в 20:39
0

Вы проверили свой код afs, чтобы убедиться, что он срабатывает, прежде чем вернуться из метода loginLocal? Просматривая этот код, я думаю, что вы возвращаетесь до того, как он завершает эту асинхронную часть.

Damith_009
9 апреля 2018 в 18:37
0

проблема в коде afs. Он не возвращал объект User, который должен был вернуть. Я исправил... Спасибо, что заметили.

Ответы (0)