Angular 2正确使用身份验证服务 [英] Angular 2 proper use of authentication service

查看:107
本文介绍了Angular 2正确使用身份验证服务的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用服务器端的NodeJS和客户端端的Angular 2来构建Web应用程序.

I am building web application using NodeJS for the server-side and Angular 2 for the client-side.

在应用程序中,我正在使用ADFS来验证用户身份.

In the application I'm using ADFS to authenticate users.

用户浏览到该网站,并自动重定向到ADFS身份验证服务器.用户完成身份验证后,他重定向回我的应用程序,我从ADFS服务器获取用户数据.

The user browses to the website and automatically redirected to the ADFS authentication server. After the user completes the authentication, he redirects back to my application and I get the user data from the ADFS server.

我使用了passport-saml包来实现身份验证,并且工作正常. 现在,用户存储在req.user.

I used passport-saml package to implement the authentication and it works fine. The user is now stored at req.user.

现在我需要在客户端使用用户的数据.

Now I need to use user's data on the client side.

经过一番研究,我发现将用户数据从服务器传递到客户端很简单:

After a little research, I found that passing user's data from server to client can be as simple as :

router.get('/user/current', AuthMiddleware.requireLogin, (req: express.Request, res: express.Response) => {
    return res.json(req.user);
});

这也可以.

现在用于客户端: 我创建了一个服务来获取经过身份验证的用户:

Now for the client-side: I've created a service to fetch the authenticated user :

@Injectable()
export class AuthService {
    private authUrl = 'http://localhost/api/user/current';
    private currentUser: User;

    constructor(private http: Http) {
        this.getUser().subscribe(user => {
            this.currentUser = user;
        });
    }

    getUser(): Observable<User> {
        return this.http.get(this.authUrl)
            .map((res: Response) => res.json())
            .catch(error => Observable.throw(error.json().error || 'Server Error'));
    }

    isAuthenticated(): boolean {
        return !!this.currentUser;
    }
}

因此,getUser方法会与用户一起返回Observable,我可以在客户端使用它.

So the getUser method returns an Observable with my user and I can use it in my client-side.

但是我的问题是:

我应该为使用经过身份验证的用户的每个组件注入AuthService吗? 如果是这样,我应该每次调用getUser并等待Observable返回用户数据,还是应该对经过身份验证的用户使用public参数? (例如,在AuthService中将currentUser参数public设置为authService.currentUser,然后仅使用authService.currentUser?)

Should I inject the AuthService to each component which uses the authenticated user? And if so, should I call getUser each time and wait for the Observable to return user's data, or should I use public parameter for the authenticated user? (for example making the currentUser parameter public in the AuthService and then just use authService.currentUser?)

推荐答案

您无需将AuthService注入到每个组件中.相反,您要做的是防止应用程序中的各种路由被激活,除非对用户进行了身份验证.您必须实现一个将插入AuthServiceAuthGuard.

You don't need to inject the AuthService into each component. What you want to do instead is guard the various routes in your application from activation unless a user has been authenticated. You must implement an AuthGuard that will have the AuthService injected.

查看 https://angular.io/docs/ts/latest/guide/router.html (在页面上搜索"GUARD THE ADMIN FEATURE")以获取更多信息.

Check out https://angular.io/docs/ts/latest/guide/router.html (search the page for "GUARD THE ADMIN FEATURE") for more information.

这篇关于Angular 2正确使用身份验证服务的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆