如果未使用AngularFire 2登录，则重定向到登录页面

Question

Whats the best way to redirect the user to the login page, if he's not authenticated with Angular2 / AngularFire2?

For example; I want to protect the /dashboard page from not authenticated users. The user should instantly get redirected to the /login page,

I'm using

• angular2 version 2.0.0-rc.1
• angular2/router version 2.0.0-rc.1
• firebase version 3.0.5
• angularfire2 version 2.0.0-beta.1

Answer 1

You can protect urls using Angular 2's UI router guard conditions. https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

An example using firebase

Guard Component

Note it would probably be better to replace referencing AF here, with an authentication service.

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AngularFire } from 'angularfire2';

@Injectable()
export class CanActivateViaAuthGuard implements CanActivate {
    user;
    constructor(private af: AngularFire, private router: Router) {
        this.af.auth.subscribe(user => {
            if (user) {
                this.user = user;
            } else {
                this.user = undefined;
            }
        });
    }

    canActivate() {
        if (this.user) {
            return true;
        }
        this.router.navigate(['/login']);
        return false;
   }
}

Application Routes

import { CanActivateViaAuthGuard} from './CanActivateViaAuthGuard';

const routes: Routes = [
    {path: '/Login', component: LoginComponent},
    {path: '/dashboard', component: DashboardComponent, canActivate: [CanActivateViaAuthGuard]}
];

export const routing = RouterModule.forRoot(routes);

Finally the login code

onSubmit() {
    this.af.auth.login({
      email: this.email,
      password: this.password,
    }).then(() => {
      this.submitted = true;
      this.router.navigate(['/dashboard', this.dashboard]);
    });
  }

Answer 2

You can use the Auth method here.

if ($scope.auth === null) {
  $state.go('login');
}

Inject your $firebaseAuth and assign it to the $scope.auth then let the if check of its true or false

Answer 3

Found the solution.

Thanks to todo-angular-2 from r-park

import { ReflectiveInjector } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import { AuthService } from './auth-service';


let appInjector: ReflectiveInjector;

/**
 * This is a workaround until `CanActivate` supports DI
 * @see https://github.com/angular/angular/issues/4112
 */

export class AuthRouteHelper {
  static dependencies(): {auth: AuthService, router: Router} {
    const injector: ReflectiveInjector = AuthRouteHelper.injector();
    const auth: AuthService = injector.get(AuthService);
    const router: Router = injector.get(Router);
    return {auth, router};
  }

  static injector(injector?: ReflectiveInjector): ReflectiveInjector {
    if (injector) appInjector = injector;
    return appInjector;
  }

  static requireAuth(): boolean {
    const { auth, router } = AuthRouteHelper.dependencies();
    if (!auth.authenticated) router.navigate(['/SignIn']);
    return auth.authenticated;
  }

  static requireUnauth(): boolean {
    const { auth, router } = AuthRouteHelper.dependencies();
    if (auth.authenticated) router.navigate(['/Tasks']);
    return !auth.authenticated;
  }
}