Skip to content

Instantly share code, notes, and snippets.

@jambutler

jambutler/AuthService.js

Last active October 28, 2016 19:41
Show Gist options
  • Save jambutler/b5de00121d706d939341f19d3092b321 to your computer and use it in GitHub Desktop.
Save jambutler/b5de00121d706d939341f19d3092b321 to your computer and use it in GitHub Desktop.
Download ZIP
AuthorizationService
Raw
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>
Raw
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)
}
}
}
Raw
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?
}
}
Raw
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'
};
Raw
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>
Raw
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>
Raw
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 = '[email protected]';
this.password = 'abc';
this.error = '';
}
}
Raw
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);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment