对于身份验证项目,我使用:
Angular CLI: 11.0.4
为前端
Node: 10.19.0
用于后端
OS: linux x64
我在ng serve
之后收到以下错误,我不确定为什么会发生这种情况,错误似乎在库node_modules/angular2-jwt/angular2-jwt.d.ts而不是在我写的代码中:
node_modules/angular2-jwt/angular2-jwt.d。ts:88:41 -错误TS2314:泛型类型'ModuleWithProviders'需要1个类型参数。
static forRoot(config: AuthConfig): ModuleWithProviders;
也连接到那(所以我相信错误是并发的,甚至,我害怕,可互换的),因为它显示了'ModuleWithProviders<T>'
错误显示,所以我认为这将是有意义的,因为它们链接在一起:
错误:node_modules/angular2-jwt/angular2-jwt.d。1:77 -错误TS2307:找不到模块"@angular/http"或其对应的类型声明。
1 import {Http, Request, RequestOptions, RequestOptionsArgs, Response} from "@angular/http";
所以我遇到的困难也是由于我不确定代码的哪些部分受到影响,所以为了完整起见,我将把app.module.ts
和携带jwt include
的文件放在
app.module.ts :
import { ValidateService } from './services/validate.service';
import { FlashMessagesModule } from 'angular2-flash-messages';
import { HttpClientModule } from '@angular/common/http';
import { AuthService } from './services/auth.service';
import { AuthGuard } from './guards/auth.guards';
const appRoutes: Routes = [
{path:'', component: HomeComponent},
{path:'register', component: RegisterComponent},
{path:'login', component: LoginComponent},
{path:'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
{path:'profile', component: ProfileComponent, canActivate: [AuthGuard]},
]
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
RegisterComponent,
HomeComponent,
DashboardComponent,
ProfileComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
RouterModule.forRoot(appRoutes),
FlashMessagesModule.forRoot(),
HttpClientModule,
],
providers: [ValidateService, AuthService, AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { tokenNotExpired } from 'angular2-jwt';
@Injectable({
providedIn: 'root'
})
export class AuthService {
authToken: any;
user: any;
constructor(private httpClient: HttpClient) { }
registerUser(user) {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
};
return this.httpClient.post('http://localhost:3000/users/register', user, httpOptions);
}
authenticateUser(user) {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
};
return this.httpClient.post('http://localhost:3000/users/authenticate', user, httpOptions);
}
getProfile() {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: this.authToken,
})
};
this.loadToken();
return this.httpClient.get('http://localhost:3000/users/profile', httpOptions);
}
storeUserData(token, user) {
localStorage.setItem('id_token', token);
localStorage.setItem('user', JSON.stringify(user));
this.authToken = token;
this.user = user;
}
loadToken() {
const token = localStorage.getItem('id_token');
this.authToken = token;
}
loggedIn() {
return tokenNotExpired();
}
logout() {
this.authToken = null;
this.user = null;
localStorage.clear();
}
}
profile.components.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
user: Object = {};
constructor(private authService: AuthService, private router: Router) { }
ngOnInit(): void {
this.authService.getProfile().subscribe(profile => {
this.user = profile;
},
err => {
console.log(err);
return false;
})
}
}
我对如何解决这个问题做了研究,以下是我到目前为止能够找到的:这篇文章非常有用,因为它有我同样的问题。这个问题的答案需要一个bug报告仓库,但是这个仓库并没有提供任何答案。给出的答案建议插入以下代码:
declare module "@angular/core" {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
不幸的是,这不是一个接受的答案,我不确定我可以把这段代码在app.module.ts的任何部分。
我也研究了这篇文章,它也很有用,但没有使用上面的建议。我从错误中理解的奇怪事实是,它似乎来自库本身,而不是来自我编写的代码。
我接着说:
-
rm -rf
所有node_modules -
rm -rf
package jason文件 - 清空缓存
-
npm install
但是结果是相同的,我总是在相同的库上收到相同的错误。请如果有人有同样的问题,你能分享它是如何解决的,我应该做些什么来照顾它。
将这段代码插入angular2-jwt.d。Ts类并确认类更改:
declare module "@angular/core" {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
但是你应该使用比这个更新的库,比如@auth0/angular-jwt
在安装这个库之后,您必须在类app.module.ts
中注册它的模块:
import {JwtModule} from '@auth0/angular-jwt'
imports: [
JwtModule.forRoot({
config: {
tokenGetter:() => {
return localStorage.getItem('access_token');
},
},
})
],
然后你可以在你的AuthService类中使用它:
import {JwtHelperService} from '@auth0/angular-jwt';
constructor(public jwtHelper: JwtHelperService) {
}
isAuthenticated(): boolean {
return !this.jwtHelper.isTokenExpired(this.token);
}
所有这些都在一个简短的示例文档(https://www.npmjs.com/package/@auth0/angular-jwt
)中进行了解释,所以在使用任何库之前不要懒惰地阅读它。