hosseinakbarian · December 3, 2018 11:49
diff --git a/app.html b/app.html
 <template>
    
      <require from="nav-bar"></require>
  
      <nav-bar router.bind="router"></nav-bar>
       
      <main>

        <div class="page-host">
          <router-view></router-view>
        </div>
        
      </main>

 </template>
diff --git a/app.js b/app.js
 import {Redirect} from 'aurelia-router';
 import { inject, bindable, observable } from 'aurelia-framework';
 import { EventAggregator } from 'aurelia-event-aggregator';

 @inject(EventAggregator)
 export class App {
  
  @bindable
  loggedIn;
  
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
  }
  
  configureRouter(config, router) {
    config.options.pushState = false;
    
    config.map([
      {
        "route": ["", "home"],
        "name": "home",
        "moduleId": "home",
        "nav": true,
        "title": "Home"
      },
      {
        "route": "dashboard",
        "name": "private-page",
        "moduleId": "private-page",
        "nav": true,
        "title": "Dashboard Page",
        // this is going to be available within AuthorizeStep
        "settings": {
          "auth": true
        }
      },
      {
        "route": "login",
        "name": "login",
        "moduleId": "login",
        "nav": true,
        "title": "Login Page",
        "settings": {
          "publicOnly": true
        }
      },
      {
        "route": "register",
        "name": "register",
        "moduleId": "register",
        "nav": true,
        "title": "Register Page",
        "settings": {
          "publicOnly": true
        }
      }
    ]);
    
    config.addPipelineStep('authorize', AuthorizeStep);
    
    this.router = router;
    this.loggedIn = false;
  }
  
  attached() {
    this.eventAggregator.subscribe('nav::toggleLogin', (data) => {
      AuthorizeStep.auth.isAuthenticated = data.loggedIn;
    });
  }
  
 }

 class AuthorizeStep {

  // substitute auth magic
  static auth = {
    isAuthenticated: false
  }

  run(navigationInstruction, next) {
    let isLoggedIn = AuthorizeStep.auth.isAuthenticated;
    
    // currently active route config
    let currentRoute = navigationInstruction.config;
    
    // settings object will be preserved during navigation
    let loginRequired = currentRoute.settings && currentRoute.settings.auth === true;
    
    if (isLoggedIn === false && loginRequired === true) {
        return next.cancel(new Redirect('login'));
    }
    
    let publicOnly = currentRoute.settings && currentRoute.settings.publicOnly === true;
    if (isLoggedIn === true && publicOnly === true) {
      return next.cancel(new Redirect('dashboard'));
    }
    
    return next();
  }
  
 }
diff --git a/home.html b/home.html
 <template>
  Public Homepage
 </template>
diff --git a/home.js b/home.js
 export class Home {
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
 </html>
diff --git a/login.html b/login.html
 <template>
  <div class="alert alert-info">Login form goes here</div>
 </template>
diff --git a/login.js b/login.js
 export class Login {
 }
diff --git a/nav-bar.html b/nav-bar.html
 <template>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

      <div class="top-menu">
        <span repeat.for="row of router.navigation">
          <a class="btn btn-default ${row.isActive ? 'btn-primary' : ''}" href.bind="row.href">${row.title}</a>
        </span>
        <span class="pull-right">
          <button class="btn ${loggedIn ? 'btn-success' : 'btn-danger'}" click.delegate="toggleLogin()">
            Toggle Login
          </button>
        </span>
      </div>

    </div>
  </nav>
 </template>
diff --git a/nav-bar.js b/nav-bar.js
 import { inject, bindable } from 'aurelia-framework';
 import { EventAggregator } from 'aurelia-event-aggregator';

 @inject(EventAggregator)
 export class NavBar {
  
  @bindable router;
  loggedIn = false;
  
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
  }

  toggleLogin() {
    this.loggedIn = !this.loggedIn;
    this.eventAggregator.publish('nav::toggleLogin', { loggedIn: this.loggedIn });
  }
  
 }
diff --git a/private-page.html b/private-page.html
 <template>
  This is a private page.
 </template>
diff --git a/private-page.js b/private-page.js
 export class PrivatePage {
 }
diff --git a/register.html b/register.html
 <template>
  <div class="alert alert-warning">Registration form goes here</div>
 </template>
diff --git a/register.js b/register.js
 export class Register {
 }
diff --git a/style.css b/style.css
 body {
  padding-top: 50px;
 }

 .top-menu {
  padding: 8px;
 }

 main {
  padding: 10px;
 }

 .page-host {
  padding-top: 10px;
 }
	<template>

	<require from="nav-bar"></require>

	<nav-bar router.bind="router"></nav-bar>

	<main>

	<div class="page-host">
	<router-view></router-view>
	</div>

	</main>

	</template>
	import {Redirect} from 'aurelia-router';
	import { inject, bindable, observable } from 'aurelia-framework';
	import { EventAggregator } from 'aurelia-event-aggregator';

	@inject(EventAggregator)
	export class App {

	@bindable
	loggedIn;

	constructor(eventAggregator) {
	this.eventAggregator = eventAggregator;
	}

	configureRouter(config, router) {
	config.options.pushState = false;

	config.map([
	{
	"route": ["", "home"],
	"name": "home",
	"moduleId": "home",
	"nav": true,
	"title": "Home"
	},
	{
	"route": "dashboard",
	"name": "private-page",
	"moduleId": "private-page",
	"nav": true,
	"title": "Dashboard Page",
	// this is going to be available within AuthorizeStep
	"settings": {
	"auth": true
	}
	},
	{
	"route": "login",
	"name": "login",
	"moduleId": "login",
	"nav": true,
	"title": "Login Page",
	"settings": {
	"publicOnly": true
	}
	},
	{
	"route": "register",
	"name": "register",
	"moduleId": "register",
	"nav": true,
	"title": "Register Page",
	"settings": {
	"publicOnly": true
	}
	}
	]);

	config.addPipelineStep('authorize', AuthorizeStep);

	this.router = router;
	this.loggedIn = false;
	}

	attached() {
	this.eventAggregator.subscribe('nav::toggleLogin', (data) => {
	AuthorizeStep.auth.isAuthenticated = data.loggedIn;
	});
	}

	}

	class AuthorizeStep {

	// substitute auth magic
	static auth = {
	isAuthenticated: false
	}

	run(navigationInstruction, next) {
	let isLoggedIn = AuthorizeStep.auth.isAuthenticated;

	// currently active route config
	let currentRoute = navigationInstruction.config;

	// settings object will be preserved during navigation
	let loginRequired = currentRoute.settings && currentRoute.settings.auth === true;

	if (isLoggedIn === false && loginRequired === true) {
	return next.cancel(new Redirect('login'));
	}

	let publicOnly = currentRoute.settings && currentRoute.settings.publicOnly === true;
	if (isLoggedIn === true && publicOnly === true) {
	return next.cancel(new Redirect('dashboard'));
	}

	return next();
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	<div class="alert alert-info">Login form goes here</div>
	</template>
	<template>
	<div class="alert alert-warning">Registration form goes here</div>
	</template>
	body {
	padding-top: 50px;
	}

	.top-menu {
	padding: 8px;
	}

	main {
	padding: 10px;
	}

	.page-host {
	padding-top: 10px;
	}