Saat ini saya memperbarui aplikasi saya untuk menggunakan ner Router. Saya melakukan segalanya kecuali rute yang dilindungi.

Utama. ts terlihat seperti ini:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import {HTTP_PROVIDERS} from '@angular/http';
import 'rxjs/Rx';

import {AuthService} from './services/auth.service';

import {AppComponent} from './app.component';

import {AuthGuard} from './services/auth.guard'

bootstrap(AppComponent, [appStateProvider, APP_ROUTER_PROVIDERS, AuthService, AuthGuard, HTTP_PROVIDERS,,disableDeprecatedForms(), provideForms()])
.catch(err => console.error(err));

Saya menerapkan auth.guard.ts:

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private _authService: AuthService, protected _router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

        if (state.url !== '/login' && !this._authService.isLoggedIn()) {
            this._router.navigate(['/login']);
            return false;
        }

        return true;
    }
}

Dan di rute aplikasi saya punya:

export const routes: RouterConfig = [
   {
    path: '',
    component: LoginComponent 
  },  
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent, canActivate: ['AuthGuard']}
];

// Export routes
export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

Sebelum itu saya menggunakan perutean lama dan semuanya baik-baik saja. Sekarang, saya mendapat pesan 'Tidak ada penyedia untuk AuthGuard!' meskipun saya memasukkannya ke dalam penyedia bootstrap saya.

Di app.component.ts saya di dalam konstruktor, saya memiliki:

   if (this._authService.isLoggedIn()) {
      this._router.navigate(['/home']);
    }
    else {
      this._router.navigate(['/login']);
    }

Sebelum saya memperbarui router jika Pengguna tidak masuk, itu dialihkan ke halaman login, selain itu diarahkan ke halaman beranda dan pengguna tidak dapat melihat rumah sampai dia tidak masuk. Di mana saya salah, saya salah dan mengapa saya mendapatkan kesalahan ini sejak Saya menyertakan penyedia dalam metode bootstrap saya sebagai penyedia?

Terima kasih

2
Yuniku_123 3 Agustus 2016, 12:46
Pertama kali ini terjadi pada saya, bahwa sebuah pertanyaan benar-benar menjawab pertanyaan saya. Berkat kode auth.guard.ts Anda, saya dapat memperbaiki masalah yang saya alami canActiate(...). Saya menambahkan ActivatedRouteSnapshot pada konstruktor, tetapi tampaknya itu cara yang salah, menambahkannya pada canActivate sebagai argumen default berhasil.
 – 
Aaron C
12 Desember 2016, 17:58

1 menjawab

Jawaban Terbaik

Hapus ' dari

canActivate: ['AuthGuard']},

Untuk

canActivate: [AuthGuard]},

Saya juga berpikir Anda harus menambahkan pathMatch: 'full' ke

{
    path: '',
    component: LoginComponent,
    pathMatch: 'full' 
  },  
3
Günter Zöchbauer 3 Agustus 2016, 12:47
2
Ini bekerja sekarang! Kesalahan yang sangat sepele, tetapi saya tidak bisa melihat. Terima kasih! :)
 – 
Yuniku_123
3 Agustus 2016, 12:53
Mengapa bidang jalur string kosong?
 – 
Wang Xiao
13 April 2017, 07:03
Saya hanya menyalinnya dari pertanyaan. Rute ini cocok ketika tidak ada jalur yang diberikan.
 – 
Günter Zöchbauer
13 April 2017, 07:31