Apologies for the delay, here is my approach:
auth.service.ts
export class AuthService {
authChanged: EventEmitter<any> = new EventEmitter();
postLogin(f: ILoginForm) {
return this.http.post('/login', f)
.map(res => res.json())
.subscribe(data => this._checkLoginResponse(data));
}
/**
* Check Login Result
* @param data
*/
private _checkLoginResponse(data: any) {
// Verifying Successful Login
if (data.data && data.meta && data.meta.token) {
// Setting User & Token
localStorage.setItem('inctoken', data.meta.token);
localStorage.setItem('incuser', JSON.stringify(data.data));
// Emitting Auth & User Events
this.authChanged.emit(this.getUser());
// Displaying Login Success Message
this.flash.success('You have been logged in successfully.');
// Redirect to Home Page
this.injector.get(Router).navigate(['/']);
}
}
/**
* Log out from Interface
* @returns boolean
*/
logout(withMsg = false): boolean {
// # Remove Token & User from LS
localStorage.removeItem('inctoken');
localStorage.removeItem('incuser');
// Emit Auth Events
this.authChanged.emit(false);
// Show Flash Message
if (withMsg)
this.flash.info('You have been logged out.', 'OK.');
// Navigate to Login Page
this.injector.get(Router).navigate(['/login']);
return true;
}
}
Any component can then utilize AuthService to track changes in authedUser, logouts, etc. For instance, take a look at my Navbar component:
navbar.component.ts
export class NavbarComponent {
/**
* Authenticated User
*/
authedUser: IUser;
constructor(private authService: AuthService) {
this.authService.authChanged
.subscribe((user?: IUser) => {
// user will be false if logged out
// or user object if logged in.
this.authedUser = user;
});
}
}
This allows me to display different content in the navbar based on the authentication status:
<nav class="navbar">
<!-- Truncated -->
<ul class="menu-item"
*ngIf="authedUser">
<li><img [src]="authedUser.avatar"></li>
<!-- Whatever -->
</ul>
<ul class="menu-item"
*ngIf="!authedUser">
<li><a [routerLink]="['/login']">Login</a></li>
<!-- Whatever -->
</ul>
</nav>
Note that many classes are shortened for brevity purposes.
If you are interested in how the token is sent in the header, here is an abridged example of the HttpClient class I created:
http.service.ts
export class HttpClient {
constructor(private http: Http) {
// ...
}
/**
* Get
* @param url
* @returns {Observable<any>}
*/
get(url): Observable<any> {
// Creating New Headers
let headers = new Headers();
// Setting Authorization Header
this._createAuthorizationHeader(headers);
// Creating Observable for Service Return.
return Observable.create((observer) => {
// Sending HTTP GET Request, Subscribe & Handle Errors
return this.http.get(this.baseUrl + url, {
headers: headers
}).subscribe(
data => observer.next(data), // Emit Data Returned
err => this.handleError(err), // Catch Errors
() => observer.complete() // Emit Completion
);
});
}
/**
* Create Authorization Header
* @param {Headers} headers
*/
private _createAuthorizationHeader(headers: Headers) {
// If We Have A Token, Append It. The
// API Server Will Determine Its Validity
if (localStorage.getItem('inctoken')) {
headers.append('Authorization', 'Bearer: ' + localStorage.getItem('inctoken'));
}
}
}
In other components, I can simply inject my HttpClient class and utilize it with the token automatically included in the headers, like so:
some.component.ts
export class SomeComponent {
constructor(private http: HttpClient) {
// ...
}
private _getSomeData() {
return this.get('/someurl')
.map(res => res.json();
}
}