Angular 5 устанавливает заголовок авторизации на защищенном маршруте - PullRequest
0 голосов
/ 11 мая 2018

Мой проект использует HttpClientModule, HttpClient и passport.js с passport-jwt.Моя цель - защитить маршрут / user / profile (который отображает ProfileComponent, который на самом деле пуст), но я всегда получаю несанкционированное сообщение, потому что не могу установить заголовок до доступа к нему.Я попытался с Interceptor (authInterceptor), но он только перехватывает запросы HTTP, а не при прямом доступе к этому маршруту.Вот файлы, которые я использую:

AppModule

@NgModule({
declarations: [
    AppComponent,
    HeaderComponent,
    SearchComponent,
],
imports: [
    AppRoutingModule,
    FormsModule,
    NgbModule.forRoot(),
    BrowserModule,
    HttpClientModule
],
providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthInterceptor,
        multi: true
    }
],
bootstrap: [AppComponent]
})
export class AppModule {

}

SigninComponent (получить значения из реактивной формы и отправить информацию в метод "вход "в AuthService)

    onSubmit() {
    const user = new User('user', this.signinForm.value.email, this.signinForm.value.password);
    this.authService.signin(user)
        .subscribe(
        data => {
            localStorage.setItem('token', data['token']);
            localStorage.setItem('userId', data['userId']);
            this.router.navigateByUrl('/');
        },
        error => console.error(error)
        );
}

метод входа

    signin(user: User) {
    let headers: HttpHeaders = new HttpHeaders();
    headers.set('Content-type', 'application/json');

    return this.http.post('http://localhost:3000/user/signin', user, {headers: headers})
}

AuthInterceptor (я думал, что он всегда устанавливает заголовок, даже обращаясь к маршрутунапрямую, но это не так. Я использую это «если», потому что «getItem» возвращает ноль)

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (localStorage.getItem('token')) {
            req = req.clone({
                setHeaders: {
                    Authorization: localStorage.getItem('token')
                }
            });
        }
        return next.handle(req);
    }
}

User.js (маршруты узлов)

router.post('/signin', function (req, res, next) {
User.findOne({email: req.body.email}, function (err, user) {
    if (err) {
        return res.status(500).json({
            title: 'An error occurred',
            error: err
        });
    }
    if (!user) {
        return res.status(401).json({
            title: 'Login failed',
            error: {message: 'Invalid login credentials'}
        });
    }
    if (!bcrypt.compareSync(req.body.password, user.password)) {
        return res.status(401).json({
            title: 'Login failed',
            error: {message: 'Invalid login credentials'}
        });
    }
    let payload = {id: user._id, username: user.username, email: user.email};
    let token = jwt.sign(payload, keys.secretOrKey, {expiresIn: 7200});
    res.status(200).json({
        message: 'Successfully logged in',
        token: 'Bearer ' + token,
        userId: user._id
    });
    });
});
router.get('/profile', passport.authenticate('jwt', { session: false }),
    function(req, res) {
        res.json({ id: req.user.id, username: req.user.username });
    });

1 Ответ

0 голосов
/ 11 мая 2018

Вы можете использовать угловую защиту для защиты маршрута от доступа.

https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3

...