From 2621d2596af071c7a6124712e0a624b16aeaa63a Mon Sep 17 00:00:00 2001 From: Marc Vaccaro Date: Wed, 9 Jan 2019 23:26:56 -0800 Subject: [PATCH] Display user's name when logged in --- Client/package-lock.json | 15 +++++++++----- Client/package.json | 1 + Client/src/app/app.component.ts | 20 ++++++++++++++++--- .../nav-menu/nav-menu.component.html | 8 ++++---- .../components/nav-menu/nav-menu.component.ts | 10 ++++------ Client/src/app/services/auth.service.ts | 9 +++++++++ 6 files changed, 45 insertions(+), 18 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index 2e6d5d6..39891d9 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -378,6 +378,14 @@ "tslib": "^1.9.0" } }, + "@auth0/angular-jwt": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@auth0/angular-jwt/-/angular-jwt-2.1.0.tgz", + "integrity": "sha512-1KFtqswmJeM8JiniagSenpwHKTf9l+W+TmfsWV+x9SoZIShc6YmBsZDxd+oruZJL7MbJlxIJ3SQs7Yl1wraQdg==", + "requires": { + "url": "^0.11.0" + } + }, "@babel/code-frame": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", @@ -7812,8 +7820,7 @@ "querystring": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", - "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", - "dev": true + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=" }, "querystring-es3": { "version": "0.2.1", @@ -9804,7 +9811,6 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", - "dev": true, "requires": { "punycode": "1.3.2", "querystring": "0.2.0" @@ -9813,8 +9819,7 @@ "punycode": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", - "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=", - "dev": true + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" } } }, diff --git a/Client/package.json b/Client/package.json index 6cbcc67..255d2ce 100644 --- a/Client/package.json +++ b/Client/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser": "^6.0.3", "@angular/platform-browser-dynamic": "^6.0.3", "@angular/router": "^6.0.3", + "@auth0/angular-jwt": "^2.1.0", "alertifyjs": "^1.11.2", "bootstrap": "^4.2.1", "core-js": "^2.5.4", diff --git a/Client/src/app/app.component.ts b/Client/src/app/app.component.ts index 7b0f672..81f8620 100644 --- a/Client/src/app/app.component.ts +++ b/Client/src/app/app.component.ts @@ -1,10 +1,24 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { AuthService } from './services/auth.service'; +import { JwtHelperService } from '@auth0/angular-jwt'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) -export class AppComponent { - title = 'app'; +export class AppComponent implements OnInit { + + private title = 'Friendster'; + private jwtHelper = new JwtHelperService(); + + constructor(private authService: AuthService) { } + + ngOnInit(): void { + const token = localStorage.getItem('token'); + if (token) { + this.authService.decodedToken = this.jwtHelper.decodeToken(token); + } + } + } diff --git a/Client/src/app/components/nav-menu/nav-menu.component.html b/Client/src/app/components/nav-menu/nav-menu.component.html index 2f8816c..fbaebe8 100644 --- a/Client/src/app/components/nav-menu/nav-menu.component.html +++ b/Client/src/app/components/nav-menu/nav-menu.component.html @@ -12,13 +12,13 @@ Messages
  • - Logout + Logout
    • -
    +
    - Welcome User + Welcome {{ authService.decodedToken?.unique_name | titlecase }}
    @@ -28,7 +28,7 @@
    -
    + diff --git a/Client/src/app/components/nav-menu/nav-menu.component.ts b/Client/src/app/components/nav-menu/nav-menu.component.ts index 90b7a0b..dc6e833 100644 --- a/Client/src/app/components/nav-menu/nav-menu.component.ts +++ b/Client/src/app/components/nav-menu/nav-menu.component.ts @@ -10,10 +10,9 @@ import { AlertifyService } from 'src/app/services/alertify.service'; export class NavMenuComponent implements OnInit { model: any = {}; - constructor(private authService: AuthService, private alertify: AlertifyService) { } + constructor(public authService: AuthService, private alertify: AlertifyService) { } - ngOnInit() { - } + ngOnInit() { } login() { this.authService.login(this.model).subscribe(next => { @@ -28,8 +27,7 @@ export class NavMenuComponent implements OnInit { this.alertify.message('Logged out'); } - isLoggedIn(): boolean { - const token = localStorage.getItem('token'); - return !!token; + isAuthenticated(): boolean { + return this.authService.isAuthenticated(); } } diff --git a/Client/src/app/services/auth.service.ts b/Client/src/app/services/auth.service.ts index 04d2e11..7547a83 100644 --- a/Client/src/app/services/auth.service.ts +++ b/Client/src/app/services/auth.service.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { map } from 'rxjs/operators'; import { Observable } from 'rxjs'; +import { JwtHelperService } from '@auth0/angular-jwt' @Injectable({ providedIn: 'root' @@ -10,6 +11,8 @@ export class AuthService { private loginUrl = '/api/auth/login'; private registerUrl = '/api/auth/register'; + private jwtHelper = new JwtHelperService(); + public decodedToken: any; constructor(private http: HttpClient) { } @@ -20,6 +23,7 @@ export class AuthService { const user = res; if (user) { localStorage.setItem('token', user.token); + this.decodedToken = this.jwtHelper.decodeToken(user.token); } }) ); @@ -28,4 +32,9 @@ export class AuthService { register(model: any) { return this.http.post(this.registerUrl, model); } + + isAuthenticated(): boolean { + const token = localStorage.getItem('token'); + return !this.jwtHelper.isTokenExpired(token); + } }