aaronksaunders / ionic4-sidemenu-auth

Building a Basic Ionic 4 Login Flow with Angular Router & Side Menu UI

ionic4-sidemenu-auth

Building a Basic Ionic 4 Login Flow with Angular Router & Side Menu UI ( now with Tabs !! )

Updated to latest Ionic Versions

Ionic:

   Ionic CLI                     : 5.4.13 (/Users/aaronksaunders/.nvm/versions/node/v10.15.1/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.21
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Utility:

   cordova-res                          : not installed
   native-run (update available: 0.3.0) : 0.2.9

System:

   NodeJS : v10.15.1 (/Users/aaronksaunders/.nvm/versions/node/v10.15.1/bin/node)
   npm    : 6.11.2
   OS     : macOS Catalina

• Code recently updated to latest version of Ionic "@ionic/angular": "^4.3.0",
• Made it a bit more complex with
  • Authentication
  • Side Menu
  • Tabs
  • Tab Detail Page
• based on great work done here - https://devdactic.com/ionic-4-login-angular/

How It Works

We put an AuthGuard on the module that provides access to all of the member related pages and functionality. The login page has no gaurd so it can be freely accessed. See more information on Route Guards in the angular.io documentation

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { 
    path: 'members', 
    canActivate: [AuthGuardService],
    loadChildren: './members/member-routing.module#MemberRoutingModule'
  },
  { path: 'login', loadChildren: './public/login/login.module#LoginPageModule' }
];

The member routing module is where we control access to the private content. An import note from the documentation is what supports this approach.

The Routing Module is a design choice whose value is most obvious when the configuration is complex and includes specialized guard and resolver services. It can seem like overkill when the actual configuration is dead simple. See more information on Routing Modules in the Angular.io Documentation

We created the authentication.service to track in the user is logged in or out and to manage the two different states.

// file: authentication.service.ts
export class AuthenticationService {
  isLoggedIn = false;

  constructor() {}

  setLoggedIn(_value) {
    this.isLoggedIn = _value;
  }
  isAuthenticated(): boolean {
    return this.isLoggedIn;
  }
}

This service is injected into the AuthGuard to help control access to a specific route.

  // file: authGuard.service.ts
  canActivate(): boolean {
    let value = this.auth.isAuthenticated() // <= from auth service
    if (!value) {
      this.router.navigateByUrl("/login")
    }
    return value
  }
}

and it is also used in the user interface, app.component.html to control the visibility of the side-menu. Meaning if you are not authenticated than the side menu isnt going to be showing.

<!-- file: app.component.html -->
<ion-app>
  <ion-split-pane>
    <ion-menu *ngIf="auth.isAuthenticated() === true"> // CHECK TO SEE IF THIS SHOULD BE DISPLAYE
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
      // MENU CONTENT
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

ionic4-sidemenu-auth's Issues

Split pane is not working

First of all, Thank you very much for the project. I am was checking the project and found that split pane is not working when the user opens the Home page. Do I have to change anything else for the split pane to work?

security: found 498 vulnerabilities (2 low, 4 moderate, 492 high)

added 7 packages from 3 contributors, updated 3 packages and audited 53225 packages in 26.592s
found 498 vulnerabilities (2 low, 4 moderate, 492 high)
  run `npm audit fix` to fix them, or `npm audit` for details

C:\ae\ionic4-sidemenu-auth>npm audit fix

> [email protected] postinstall C:\ae\ionic4-sidemenu-auth\node_modules\@angular-devkit\build-angular\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN @ionic/[email protected] requires a peer of @angular-devkit/[email protected] - 8 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/[email protected] - 8 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/compiler@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular-devkit/[email protected] requires a peer of @angular/compiler-cli@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of @angular/compiler-cli@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/[email protected] requires a peer of typescript@>=3.4 < 3.6 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular-devkit/[email protected]
added 333 packages from 113 contributors, removed 39 packages, updated 127 packages and moved 23 packages in 86.596s

20 packages are looking for funding
  run `npm fund` for details

fixed 496 of 498 vulnerabilities in 53225 scanned packages
  2 package updates for 2 vulnerabilities involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

C:\ae\ionic4-sidemenu-auth>

unable to clone new version

@aaronksaunders

From this commit: 45c191d