a

Câu hỏi "Không có nhà cung cấp cho AuthGuard!" Bằng cách sử dụng CanActivate trong Angular 2


CHỈNH SỬA : Rõ ràng đây là lỗi thời, bây giờ bạn cung cấp bảo vệ của bạn tại providers mảng trong một NgModule. Xem các câu trả lời hoặc tài liệu chính thức khác để biết thêm thông tin.

  • bootstrapping trên một thành phần đã lỗi thời
  • provideRouter() cũng đã lỗi thời


Tôi đang cố gắng thiết lập Xác thực trong dự án của mình, sử dụng thông tin đăng nhập và AuthGuard từ hướng dẫn Angular2: https://angular.io/docs/ts/latest/guide/router.html

Tôi đang sử dụng bản phát hành: "@ góc / bộ định tuyến": "3.0.0-beta.1".

Tôi sẽ cố gắng giải thích càng nhiều càng tốt, hãy cho tôi biết nếu bạn cần thêm chi tiết.


tôi có của tôi main.ts tập tin mà boostraps các ứng dụng với các mã sau đây:

bootstrap(MasterComponent, [
    APP_ROUTER_PROVIDERS,
    MenuService
])
.catch(err => console.error(err));

Tôi tải MasterComponent, mà tải một Header chứa các nút cho phép tôi điều hướng thông qua ứng dụng của tôi và nó cũng chứa chính của tôi bây giờ.

Tôi đang làm theo hướng dẫn để làm cho ứng dụng của tôi hoạt động theo cùng một cách, với những điều sau đây app.routes.ts :

export const routes: RouterConfig = [
    ...LoginRoutes,
    ...MasterRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes),
    AUTH_PROVIDERS
];

login.routes.ts từ hướng dẫn, xác định AuthGuard của tôi:

export const LoginRoutes = [
    { path: 'login', component: LoginComponent }
];

export const AUTH_PROVIDERS = [AuthGuard, AuthService];

Thành phần chính của tôi có định nghĩa tuyến đường riêng, cũng có chứa bộ bảo vệ mà tôi đang cố gắng thiết lập. master.routes.ts :

export const MasterRoutes : RouterConfig = [
    { path: '', redirectTo: '/accueil', pathMatch: 'full' },

    {
        path: 'accueil',
        component: AccueilComponent
    },

    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];

Và tôi đang sử dụng các tệp giống như hướng dẫn, auth.guard.ts, auth.service.ts, login.component.ts và login.routes.ts.


trong tôi header.component.ts khi tôi cố gắng truy cập bất kỳ tuyến đường nào, nó hoạt động tốt, nhưng khi tôi cố gắng truy cập đường dẫn được bảo vệ (/ trang tổng quan), tôi nhận được Không có nhà cung cấp cho AuthGuard! lỗi.

Tôi đã xem bài đăng gần đây có cùng vấn đề với tôi (NoProviderError sử dụng CanActivate trong Angular 2), nhưng với tôi bảo vệ được khởi động đúng cách lên đến main.ts tập tin, do đó, router của tôi nên biết những tuyến đường nên được cung cấp với các AuthGuard phải không?

Bất kỳ giúp đỡ hoặc tư vấn sẽ được đánh giá rất nhiều. Cảm ơn !


24
2017-07-05 12:35


gốc


Bạn đã nhập chưa AuthGuard vào master.routes.ts và login.routes.ts? - Günter Zöchbauer
Có, tôi đã nhập chính xác. Tôi đã không đề cập đến nó, nhưng tôi tự điều hướng đến tuyến đường bởi vì tôi muốn liên kết trên một nút <bằng cách sử dụng this.router.navigate (['/ bảng điều khiển']); - Alex Beugnet
Xem stackoverflow.com/questions/38144547/… - Günter Zöchbauer
Điều kỳ lạ là tường lửa của công ty tôi thực sự đang chặn các liên kết plunkr, vì vậy tôi có thể cần một chút thời gian ... Tôi sẽ chỉnh sửa bình luận này với một thư mục làm việc hy vọng - Alex Beugnet
Không có gì. Vui mừng khi biết bạn đã tìm ra. - Günter Zöchbauer


Các câu trả lời:


Tôi đã có cùng một vấn đề này sau khi đi qua phần Hướng dẫn tuyến đường của hướng dẫn Định tuyến và ủy quyền trên trang web Angular https://angular.io/docs/ts/latest/guide/router.html, đó là phần 5.

Tôi đang thêm AuthGuard vào một trong các tuyến đường chính của tôi và không cho các tuyến đường con như hướng dẫn hiển thị.

Tôi đã sửa nó bằng cách thêm AuthGuard vào danh sách các nhà cung cấp của tôi trong tệp app.module.ts của tôi, vì vậy tệp bây giờ trông giống như sau:

import { AppComponent } from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {AuthGuard} from './auth-gaurd.service';

import { AnotherPageComponent } from './another-page/another-page.component';
import { LoginPageComponent } from './login-page/login-page.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    JsonpModule,
    AppRoutingModule,
    HttpModule
  ],
  declarations: [
    AppComponent,
    LoginPageComponent,
    AnotherPageComponent
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})

export class AppModule { }

Tôi đã quay trở lại thông qua các hướng dẫn và trong tập tin app.module.ts của họ, họ không thêm AuthGuard cho các nhà cung cấp, không chắc chắn lý do tại sao.


48
2017-10-21 15:19





Ngoài ra, đừng rơi vào bẫy sử dụng chữ cho lớp bảo vệ bên trong cấu hình định tuyến của bạn, chỉ vì một số bài viết trên blog làm:

{ path: 'whatever', component: WhatEverComponent, canActivate: ['WhatEverGuard'] }

sẽ không hoạt động (No provider for...), thay vào đó, hãy sử dụng lớp học trực tiếp:

{ path: 'whatever', component: WhatEverComponent, canActivate: [WhatEverGuard] }

Một gợi ý khác, khi các thành phần tải lười biếng, trình bảo vệ được áp dụng trong cấu hình định tuyến của thành phần cha, không phải trong cấu hình định tuyến của thành phần được nạp lười.


14
2017-10-22 07:27



Tôi đặt WhatEverGuard vào dấu nháy đơn, và nó cho tôi thấy Không có nhà cung cấp .. điều đó thật khó chịu - Redplane
Tôi cũng vậy. Tôi đã có: canActivate: ['AuthGuard', AuthGuard] Ngay sau khi tôi xóa nội dung nó hoạt động. - Chris Gilbert


Đối với những người vẫn còn lỗi này - đừng quên đưa dịch vụ hoặc lớp học của bạn vào chức năng bootstrap chính. Và đừng quên nhập dịch vụ này trước khi bootstrap chạy.

import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
import { AuthGuard } from './shared/auth.service';

bootstrap(AppComponent, [
  appRouterProviders,
  AuthGuard
]);

Nhóm Angular 2 đã không đề cập đến điều này trong tài liệu định tuyến chính, và phải mất vài giờ để tôi tìm ra nó.


9
2017-08-05 17:13





Thực ra, nó chỉ là một lỗi đánh máy ...

Tôi đã gõ

nhập {AuthGuard} từ './../Authentification/auth.guard';

thay vì

nhập {AuthGuard} từ './../authentification/auth.guard';

làm cho nó không hoạt động nhưng đồng thời không hiển thị cho tôi bất kỳ lỗi nào ...

(gương mặt buồn)


5
2017-07-05 14:08



Thats lý do tại sao nó được khuyến khích sử dụng trình soạn thảo nhận biết typescript như Visual studio code (tốt nhất của nó). - Abdul Mannan
Có, tôi đã sử dụng VS 2015 nhưng rõ ràng, nó không tốt bằng Visual Code. - Alex Beugnet
Tôi phải đối mặt với cùng một loại vấn đề, cuối cùng tìm thấy vấn đề là đường dẫn nhập là trường hợp nhạy cảm - Mahesh


Câu trả lời nằm sâu hơn trong hướng dẫn. Xem danh sách tệp trong chủ đề "Thêm LoginComponent" trong phần "Thành phần ít tuyến đường: ..." trong "Milestone 5: Route Guards". Nó cho thấy AuthGuard và AuthService được nhập khẩu và được thêm vào mảng nhà cung cấp trong login-routing.module.ts, và sau đó mô-đun đó được nhập vào app.module.ts.

login-routing.module.ts

  ...
    import { AuthGuard }            from './auth-guard.service';
    import { AuthService }          from './auth.service';
    ...
    @NgModule({
    ...
      providers: [
        AuthGuard,
        AuthService
      ]
    })
    export class LoginRoutingModule {}

app.module.ts

import { LoginRoutingModule }      from './login-routing.module';

@NgModule({
  imports: [
    ...
    LoginRoutingModule,
    ...    
  ],
  ...
  providers: [
    DialogService
  ],
  ...

5
2017-07-27 21:18



Cảm ơn vì điều này, tôi đã bị mắc kẹt trên hướng dẫn và điều này đã giúp rất nhiều. Tôi nghĩ rằng họ nên ở trong appModule, nhưng họ không có trong phiên bản cuối cùng của mã và tôi không thể tìm ra cách nó hoạt động mà không có chúng. - wildrhombus


Tôi gặp phải vấn đề này khi tôi đang theo một hướng dẫn. Tôi đã thử hầu hết câu trả lời ở đây nhưng không nhận được bất kỳ thành công nào. Sau đó, tôi đã thử cách ngớ ngẩn như đặt AuthGuard trước các dịch vụ khác trong nhà cung cấp và nó hoạt động.

// app.module.ts

 .. 
 providers: [
   AuthGuard,
   UserService,
   ProjectService
  ]

2
2018-02-27 06:13





Vì bạn đã nhận được giải pháp vì vấn đề cú pháp. Tôi chỉ muốn chia sẻ thông tin này.

chúng tôi chỉ cần cung cấp AuthGaudSerivce làm nhà cung cấp trong mô-đun tương ứng với tuyến đường tương ứng. Không cần phải cung cấp trong mô-đun chính hoặc mô-đun gốc như mô-đun chính sẽ tự động tải tất cả các mô-đun phụ nhất định. Điều này giúp trong việc giữ mã mô-đun và đóng gói.

ví dụ, giả sử chúng ta có kịch bản bên dưới

1. we have module m1
2. we have route m1r in module m1
3. route m1r has 2 route r1 and r2
4. we want to protect r1 using authGaurd
5. finally we have main module that is dependent on sub module m1 

Dưới đây chỉ là mẫu thử nghiệm, không phải mã thực tế cho mục đích hiểu

//m1.ts    
import {AuthGaurd} from './auth.gaurd.service'
import {m1r} from './m1r'
    @NgModule(
     imports: [m1r],
     providers: [AuthGaurd]
    )
    export class m1{
    }

//m1r.ts
import {AuthGaurd} from './auth.gaurd.service'
const authRoute = [
 {path: '/r1', component: 'authComponent', canActivate: [AuthGaurd]},
 {path: '/r2', component: 'other'}
]
export authRoute

//main.module.ts
import {m1} from ''
import {mainComponent} from ''
@NgModule({
  imports: [m1],
  bootstrap: [mainComponent]
  })
export class MainModule{}    

1
2017-09-22 07:54





import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}

1
2018-01-28 09:01





Nhập cả hai HttpModule và HttpClientModule đã giúp tôi.

import { HttpClientModule } from '@angular/common/http'; 
import { HttpModule } from '@angular/http';

1
2017-12-15 06:47





bạn có thể thử nhập AuthGuard trong nhà cung cấp mô đun đó và sau đó nhập nó vào tệp thành phần định tuyến-routing.module.ts

@NgModule({
providers: [
    AuthGuard
  ],})

0
2017-11-08 07:11