jambutler/AuthService.js

## app.html
<template>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>Aurelia Session Example</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">

        <!-- We can call the logout() method directly on the object. -->
        <li><a href="#" click.delegate="auth.logout()">Log Out</a></li>
      </ul>
    </div>
  </nav>

  <div class="page-host">
    <section>
      <h1>User Object</h1>
      <pre>${auth.session | toJSON }</pre>
      <h2>IsAuthenticated?</h2>
      <div>${auth.isAuthenticated()}</div>
    </section>
  </div>
</template>

## app.js
import { inject } from 'aurelia-framework';
import AuthService from 'AuthService';

@inject(AuthService)
export class App {

  constructor(AuthService) {
  	this.auth = AuthService;
  	console.log('session from app: ' + JSON.stringify(this.auth.session) + ' ' + this.auth.timestamp);


  }
}


export class ToJSONValueConverter {
  toView(obj) {
    if (obj) {
      return JSON.stringify(obj, null, 2)
    }
  }
}

## AuthService.js
import { Aurelia, inject } from 'aurelia-framework';
import { HttpClient } from 'aurelia-http-client';
//import {HttpClient} from 'aurelia-fetch-client';
import config from 'config';

@inject(Aurelia, HttpClient)
export default class AuthService {

	session = null

	// As soon as the AuthService is created, we query local storage to
	// see if the login information has been stored. If so, we immediately
	// load it into the session object on the AuthService.
//fetch
//	constructor(Aurelia, HttpClient) {
///    http.fetch('https://api.github.com/users')
//      .then(response => response.json())
//      .then(users => this.users = users);
//  }


//http-client
	constructor(Aurelia, HttpClient) {
		HttpClient.configure(http => {
	      	http.withBaseUrl(config.baseUrl);

    	});
    this.timestamp=Date.now()
    this.res= '{"firstName": "J","lastName": "B","permission": 7,"hash": "f879sdf90fgds"}';
		this.http = HttpClient;
		this.app = Aurelia;

		this.session =  JSON.parse(this.res || null); // JSON.parse(localStorage[config.tokenName] || null);

  	}

	login(username, password) {
        //skip login for now getting https error
        //this.http
        //	.post(config.loginUrl, { username, password })
        //	.then((response) => response.content)
        //	.then((session) => {

	    		// Save to localStorage
	    	//	localStorage[config.tokenName] = JSON.stringify(session);

	    		// .. and to the session object
	    	//	this.session = session;
	     		// .. and set root to app.
	    	//	this.app.setRoot('app');


	    	//});


	    		localStorage[config.tokenName] = JSON.parse(this.res);

	    		// .. and to the session object
	    		this.session =  this.res;
          console.log('session from auth svc: ' + this.session + ' ' + this.timestamp);
	    		// .. and set root to app.
	    		this.app.setRoot('app');
	}

	logout() {

		// Clear from localStorage
		localStorage[config.tokenName] = null;

		// .. and from the session object
		this.session = null;

		// .. and set root to login.
		this.app.setRoot('login')
	}

	isAuthenticated() {
		return this.session !== null;
	}

	can(permission) {
		return true; // why not?
	}
}

## config.js
// The confic could be part of a larger config file. If this service
// was abstracted to a plugin, it could be set up in the config.
export default {
	baseUrl: 'http://www.mocky.io/v2/',
	loginUrl: '560122ef9635789e120aa366',
	tokenName: 'ah12h3'
};

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--
        "aurelia-fetch-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client"

    -->
  </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>
      require.config({
        paths: {
             "aurelia-http-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-http-client/dist/amd/aurelia-http-client"

        }
      })
    </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>

## login.html

<template>
  <form class="login-form" submit.delegate="login()">

    <input type="text" placeholder="username" value.bind="username" text="test"/>
    <input type="password" placeholder="password" value.bind="password" />
    <button type="submit">Login</button>
    <span class="error">${error}</span>
  </form>
</template>

## login.js
import { inject } from 'aurelia-framework';
import AuthService from 'AuthService';

@inject(AuthService)
export class Login {

  constructor(AuthService) {

    // Or, if we want to add additional logic to the function,
    // we can call it within another method on our view model.
    this.login = () => {
      if (this.username && this.password) {
        AuthService.login(this.username, this.password)
      } else {
        this.error = 'Please enter a username and password.';
      }
    }
  }

  activate() {
    this.username = 'test@test.com';
    this.password = 'abc';
    this.error = '';
  }
}

## main.js
import AuthService from 'AuthService';

export function configure(aurelia) {
	aurelia.use
    .standardConfiguration()
    .developmentLogging();

  // After starting the aurelia, we can request the AuthService directly
  // from the DI container on the aurelia object. We can then set the
  // correct root by querying the AuthService's isAuthenticated method.
  aurelia.start().then(() => {
	  	var auth = aurelia.container.get(AuthService);
	    let root = auth.isAuthenticated() ? 'app' : 'login';
	    aurelia.setRoot(root);
  	});
}
	<template>

	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	<span class="sr-only">Toggle Navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">
	<i class="fa fa-home"></i>
	<span>Aurelia Session Example</span>
	</a>
	</div>

	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav navbar-right">

	<!-- We can call the logout() method directly on the object. -->
	<li><a href="#" click.delegate="auth.logout()">Log Out</a></li>
	</ul>
	</div>
	</nav>

	<div class="page-host">
	<section>
	<h1>User Object</h1>
	<pre>${auth.session \| toJSON }</pre>
	<h2>IsAuthenticated?</h2>
	<div>${auth.isAuthenticated()}</div>
	</section>
	</div>
	</template>
	import { inject } from 'aurelia-framework';
	import AuthService from 'AuthService';

	@inject(AuthService)
	export class App {

	constructor(AuthService) {
	this.auth = AuthService;
	console.log('session from app: ' + JSON.stringify(this.auth.session) + ' ' + this.auth.timestamp);


	}
	}


	export class ToJSONValueConverter {
	toView(obj) {
	if (obj) {
	return JSON.stringify(obj, null, 2)
	}
	}
	}
	import { Aurelia, inject } from 'aurelia-framework';
	import { HttpClient } from 'aurelia-http-client';
	//import {HttpClient} from 'aurelia-fetch-client';
	import config from 'config';

	@inject(Aurelia, HttpClient)
	export default class AuthService {

	session = null

	// As soon as the AuthService is created, we query local storage to
	// see if the login information has been stored. If so, we immediately
	// load it into the session object on the AuthService.
	//fetch
	// constructor(Aurelia, HttpClient) {
	/// http.fetch('https://api.github.com/users')
	// .then(response => response.json())
	// .then(users => this.users = users);
	// }



	//http-client
	constructor(Aurelia, HttpClient) {
	HttpClient.configure(http => {
	http.withBaseUrl(config.baseUrl);

	});
	this.timestamp=Date.now()
	this.res= '{"firstName": "J","lastName": "B","permission": 7,"hash": "f879sdf90fgds"}';
	this.http = HttpClient;
	this.app = Aurelia;

	this.session = JSON.parse(this.res \|\| null); // JSON.parse(localStorage[config.tokenName] \|\| null);

	}

	login(username, password) {
	//skip login for now getting https error
	//this.http
	// .post(config.loginUrl, { username, password })
	// .then((response) => response.content)
	// .then((session) => {

	// Save to localStorage
	// localStorage[config.tokenName] = JSON.stringify(session);

	// .. and to the session object
	// this.session = session;
	// .. and set root to app.
	// this.app.setRoot('app');


	//});



	localStorage[config.tokenName] = JSON.parse(this.res);

	// .. and to the session object
	this.session = this.res;
	console.log('session from auth svc: ' + this.session + ' ' + this.timestamp);
	// .. and set root to app.
	this.app.setRoot('app');
	}

	logout() {

	// Clear from localStorage
	localStorage[config.tokenName] = null;

	// .. and from the session object
	this.session = null;

	// .. and set root to login.
	this.app.setRoot('login')
	}

	isAuthenticated() {
	return this.session !== null;
	}

	can(permission) {
	return true; // why not?
	}
	}
	// The confic could be part of a larger config file. If this service
	// was abstracted to a plugin, it could be set up in the config.
	export default {
	baseUrl: 'http://www.mocky.io/v2/',
	loginUrl: '560122ef9635789e120aa366',
	tokenName: 'ah12h3'
	};
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!--
	"aurelia-fetch-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client"

	-->
	</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>
	require.config({
	paths: {
	"aurelia-http-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-http-client/dist/amd/aurelia-http-client"

	}
	})
	</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>
	<form class="login-form" submit.delegate="login()">

	<input type="text" placeholder="username" value.bind="username" text="test"/>
	<input type="password" placeholder="password" value.bind="password" />
	<button type="submit">Login</button>
	<span class="error">${error}</span>
	</form>
	</template>
	import AuthService from 'AuthService';

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	// After starting the aurelia, we can request the AuthService directly
	// from the DI container on the aurelia object. We can then set the
	// correct root by querying the AuthService's isAuthenticated method.
	aurelia.start().then(() => {
	var auth = aurelia.container.get(AuthService);
	let root = auth.isAuthenticated() ? 'app' : 'login';
	aurelia.setRoot(root);
	});
	}