Skip to content
Demo project for Angular 8 JWT Authentication with HttpInterceptor and Router
TypeScript HTML JavaScript CSS
Branch: master
Clone or download

Latest commit

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e first commit Jan 4, 2020
src add options for Node.js Express back-end Jan 17, 2020
.editorconfig first commit Jan 4, 2020
.gitignore first commit Jan 4, 2020
README.md add options for Node.js Express back-end Jan 17, 2020
angular.json first commit Jan 4, 2020
browserslist first commit Jan 4, 2020
karma.conf.js first commit Jan 4, 2020
package-lock.json first commit Jan 4, 2020
package.json first commit Jan 4, 2020
tsconfig.app.json first commit Jan 4, 2020
tsconfig.json first commit Jan 4, 2020
tsconfig.spec.json first commit Jan 4, 2020
tslint.json first commit Jan 4, 2020

README.md

Angular 8 JWT Authentication example

For more detail, please visit:

Angular 8 JWT Authentication with HttpInterceptor and Router

With Spring Boot back-end

Angular 8 + Spring Boot: JWT Authentication & Authorization example

Run ng serve for a dev server. Navigate to http://localhost:4200/.

With Node.js Express back-end

Node.js Express + Angular 8: JWT Authentication & Authorization example

Open app/_helpers/auth.interceptor.js, modify the code to work with x-access-token like this:

...

// const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end
const TOKEN_HEADER_KEY = 'x-access-token';   // for Node.js Express back-end

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  ...

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    ...
    if (token != null) {
      // for Spring Boot back-end
      // authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });

      // for Node.js Express back-end
      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) });
    }
    return next.handle(authReq);
  }
}

...

Run ng serve --port 8081 for a dev server. Navigate to http://localhost:8081/.

You can’t perform that action at this time.