\n
This is the part 7 of post Intro to Nodejs - part 6.
\nSo lets get started.
\nIn the next part, we will cover Guards and Authentication. Only the user who are logged in should see the books list and should only be able to add/edit/delete. We will discuss concepts like Authentication, Authorization, Guards and Interceptors.
\nFirst, we need to protect our backend.
\nOnly authorized users should have access to Books List right. Only authorized users can add/update/delete books from the database.
\nHow do we do it?
\nRemember, we created a JWT Token when we login? we will use that token and save in our “local Storage”.
\nOnce token is saved, every request is sent with an authorization header. That includes our credentials.
\nHere is an example
\n\n When we go to localhost:3000/books then first If any error then checkAuth will throw the error and it won’t touch lets also make one change in our code. in users.controller.js make sure we use Lets take a look at we get that authorization from we decode it using the jwt library. if there is no token or it has expired, then it will throw the error. Lets see this in action. \n we get a 401 error. We don’t see our books list anymore. For that to happen, we first need to save our JWT token after we login into local Storage or ionic Storage. lets do that. lets create an lets install these to access ionic storage. to use it in our service file, we need to import it in app.module.ts lets write code in our Auth.service.ts file we will use this in login.page.ts lets update our code. we just add one line. we get the token in data.token so Nice. we still however need to add this token to our books request. Lets do that. We will be changing our methods a little bit. We first need to update our GET /books request. lets go to Few things we changed. We converted our Observable to Promise (because we had to use async/await for getting token from Ionic Storage). we append that Token in our headers. remember our Node.js middleware where we read We also updated the component method. Lets take a look. books.page.ts Now, our books should return. \n Now it will work for all. we need to update our methods in Angular/Ionic as well. books.service.ts Lets update the methods as well books.page.ts addnewbook.component.ts Now our flow is working. Now we’re successfully restricting our user access to the API without our secure token. What we need to do is prevent the user even going to books page if he doesnot have a token. In Angular, we do that using Guards Lets create a folder inside sdk -> custom -> guards \n we will come back to redirect.login.ts in a while. In the meantime, lets use lets go to app-routing.module.ts Now if there is no token, it won’t let us go to books page. To test it, lets change app.component.html and .ts a little bit app.component.ts Click on logout on the drawer will log you out of the app (It will delete the token from storage). \n We can see our token being saved in IndexedDB (Ionic Storage handles this for us). Lets see what redirectLogin is supposed to do. Imagine if Im already logged in, I should never go to login page right? right now I can do that. which is wrong. so lets add redirectLogin.guard.ts lets use it in app-routing.module.ts Now if I go to login page, it takes me to /books as long as I’m logged in. We have covered almost all scenarios. However, one is missing. Lets say your token has expired and server send a 401 error. What do you do now? if we get a 401 or 403 error from server, we need to quickly send it back to login page. don’t allow access to Books api. For that, we use Interceptors Interceptors in Angular catch requests before and after. All HTTP Requests in Angular go through the interceptor. lets create an httpinterceptor.service.ts in sdk -> core -> httpinterceptor.service.ts To use it, lets go to app.module.ts import these and update providers and Boom. its set up. We covered quite a few things things here Check if the user is login or not. Check if the user has to roles to perform certain tasks. For e.g is it admin or user ? We didn’t cover this in here. Angular services that prevent going to a page/route under some condition. Catch HTTP Requests and give us control. These are like middlewares for angular. Here’s link to the node.js app code. Here’s link to the ionic app code. (branch part7) In the next part, we will deploy our application to production. we will use mlab / mongodb Atlas for online database. we will use heroku platform to deploy our backend. we will create an APK app using Capacitor.checkAuth will run. After that, UserController.getAll will run.UserController.getAll. That’s it. that’s all the logic. const token = jsonwebtoken.sign({\n data: result,\n role: 'User'\n }, process.env.JWT_KEY, { expiresIn: '7d' });process.env.JWT_KEY instead of previously supersecretTokencheckAuth middleware.const jwt = require('jsonwebtoken');\n\nmodule.exports = (req, res, next) => {\n try {\n const token = req.headers.authorization;\n const decoded = jwt.verify(token, process.env.JWT_KEY);\n req.userData = decoded;\n next();\n } catch (error) {\n next({\n message: 'Auth failed',\n status: 401\n });\n }\n};req.headers.auth.service.ts file in sdk -> core folder.ionic cordova plugin add cordova-sqlite-storage\n\nnpm install @ionic/storageimports: [\n BrowserModule,\n IonicModule.forRoot(),\n IonicStorageModule.forRoot(),\n HttpClientModule,\n AppRoutingModule\n ]import { Injectable } from '@angular/core';\nimport { Storage } from '@ionic/storage';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class AuthService {\n constructor(private storage: Storage) {}\n\n public saveTokenToStorage(token: string) {\n this.storage.set('token', token);\n }\n\n public async getTokenFromStorage() {\n return await this.storage.get('token');\n }\n} data => {\n console.log('got response from server', data);\n this.loading = false;\n this.authService.saveTokenToStorage(data.token);\n this.router.navigateByUrl('/home');\n },books.service.ts public async getAllBooks(): Promise<any> {\n const url = BookyConfig.getPath() + '/books';\n const token = await this.authService.getTokenFromStorage();\n return this.http.get(url, {\n headers: new HttpHeaders().set('Authorization', token)\n });\n }req.headers.authorization ? that’s what we are adding here.async getAll() {\n this.loading = true;\n\n const observable = await this.booksService.getAllBooks();\n observable.subscribe(\n data => {\n this.books = data.data.docs;\n this.loading = false;\n console.log('data', data);\n },\n err => {\n console.log('err', err);\n }\n );\n }import { HttpClient, HttpHeaders } from '@angular/common/http';\n\nimport { AuthService } from './../core/auth.service';\nimport { BookyConfig } from '../booky.config';\nimport { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class BooksService {\n constructor(private http: HttpClient, private authService: AuthService) {}\n\n public async getAllBooks(): Promise<any> {\n const url = BookyConfig.getPath() + '/books';\n const token = await this.authService.getTokenFromStorage();\n return this.http.get(url, {\n headers: new HttpHeaders().set('Authorization', token)\n });\n }\n\n public async addNewBook(data: object): Promise<any> {\n const url = BookyConfig.getPath() + '/books/add';\n const token = await this.authService.getTokenFromStorage();\n\n return this.http.post(url, data, {\n headers: new HttpHeaders().set('Authorization', token)\n });\n }\n public async updateBook(data): Promise<any> {\n const url = BookyConfig.getPath() + `/books/${data._id}`;\n const token = await this.authService.getTokenFromStorage();\n\n return this.http.put(url, data, {\n headers: new HttpHeaders().set('Authorization', token)\n });\n }\n public async deleteBook(id: string): Promise<any> {\n const url = BookyConfig.getPath() + `/books/${id}`;\n const token = await this.authService.getTokenFromStorage();\n\n return this.http.delete(url, {\n headers: new HttpHeaders().set('Authorization', token)\n });\n }\n} async deleteBook() {\n this.deleteLoading = true;\n const observable = await this.booksService.deleteBook(\n this.selectedBook._id\n );\n\n observable.subscribe(\n data => {\n console.log('got response from server', data);\n this.deleteLoading = false;\n this.getAll();\n },\n error => {\n this.deleteLoading = false;\n console.log('error', error);\n }\n );\n }\n } async addNew() {\n const observable = await this.booksService.addNewBook(\n this.addNewBookForm.value\n );\n observable.subscribe(\n async data => {\n console.log('got response from server', data);\n const name = this.addNewBookForm.controls['name'].value;\n const toast = await this.toastController.create({\n message: `${name} has been added successfully.`,\n duration: 3500\n });\n toast.present();\n this.loading = false;\n this.addNewBookForm.reset();\n //optional\n\n this.modalCtrl.dismiss();\n },\n error => {\n this.loading = false;\n console.log('error', error);\n }\n );\n }\n async updateBook() {\n const observable = await this.booksService.updateBook(\n this.addNewBookForm.value\n );\n\n observable.subscribe(\n async data => {\n console.log('got response from server', data);\n const name = this.addNewBookForm.controls['name'].value;\n const toast = await this.toastController.create({\n message: `${name} has been updated successfully.`,\n duration: 3500\n });\n toast.present();\n this.loading = false;\n this.addNewBookForm.reset();\n //optional\n\n this.modalCtrl.dismiss();\n },\n error => {\n this.loading = false;\n console.log('error', error);\n }\n );\n }IsLoginGuard service/guard we created. {\n path: 'books',\n canActivate: [IsLoginGuard],\n loadChildren: () =>\n import('./books/books.module').then(m => m.BooksPageModule)\n } <ion-list>\n <ion-menu-toggle auto-hide=\"false\" *ngFor=\"let p of appPages\">\n <ion-item *ngIf=\"p?.title!=='Logout'\" [routerDirection]=\"'root'\" [routerLink]=\"[p.url]\">\n <ion-icon *ngIf=\"p?.icon\" slot=\"start\" [name]=\"p.icon\"></ion-icon>\n <ion-label>\n {{p.title}}\n </ion-label>\n </ion-item>\n <ion-item (click)=\"logout()\" *ngIf=\"p?.title==='Logout'\">\n <ion-icon *ngIf=\"p?.icon\" slot=\"start\" [name]=\"p.icon\"></ion-icon>\n <ion-label>\n {{p.title}}\n </ion-label>\n </ion-item>\n </ion-menu-toggle>\n </ion-list>public appPages = [\n {\n title: 'Home',\n url: '/home',\n icon: 'home'\n },\n {\n title: 'Books',\n url: '/books',\n icon: 'book'\n },\n {\n title: 'Logout',\n icon: 'power'\n }\n ];\n\n logout() {\n this.authService.logout();\n }import { CanActivate, Router } from '@angular/router';\n\nimport { AuthService } from 'src/sdk/core/auth.service';\nimport { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class RedirectLoginGuard implements CanActivate {\n constructor(private router: Router, private authService: AuthService) {}\n\n async canActivate() {\n const token = await this.authService.getTokenFromStorage();\n if (token) {\n this.router.navigateByUrl('/books');\n } else {\n return true;\n }\n }\n} {\n path: 'login',\n canActivate: [RedirectLoginGuard],\n loadChildren: () =>\n import('./login/login.module').then(m => m.LoginPageModule)\n },\n {\n path: 'register',\n canActivate: [RedirectLoginGuard],\n loadChildren: () =>\n import('./register/register.module').then(m => m.RegisterPageModule)\n },import {\n HTTP_INTERCEPTORS,\n HttpErrorResponse,\n HttpEvent,\n HttpHandler,\n HttpInterceptor,\n HttpRequest\n} from '@angular/common/http';\n\nimport { AuthService } from './auth.service';\nimport { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs/internal/Observable';\nimport { Router } from '@angular/router';\nimport { tap } from 'rxjs/operators';\n\n@Injectable()\nexport class ErrorInterceptor implements HttpInterceptor {\n constructor(private router: Router, private authService: AuthService) {}\n\n intercept(\n req: HttpRequest<any>,\n next: HttpHandler\n ): Observable<HttpEvent<any>> {\n return next.handle(req).pipe(\n tap(\n event => {},\n err => {\n if (\n err instanceof HttpErrorResponse &&\n (err.status === 403 || err.status === 401)\n ) {\n this.authService.logout();\n }\n }\n )\n );\n }\n}import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';\n\nimport { ErrorInterceptor } from 'src/sdk/core/httpinterceptor.service';providers: [\n StatusBar,\n SplashScreen,\n {\n provide: HTTP_INTERCEPTORS,\n useClass: ErrorInterceptor,\n multi: true\n },\n { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }\n ],Authentication
\nAuthorization
\nGuards
\nInterceptor
\n