Skip to content

Instantly share code, notes, and snippets.

@martonsagi
Last active December 3, 2018 11:49
Show Gist options
  • Save martonsagi/b70a094db52e0cc34fd7c44de550f046 to your computer and use it in GitHub Desktop.
Save martonsagi/b70a094db52e0cc34fd7c44de550f046 to your computer and use it in GitHub Desktop.
Aurelia Pipeline Authorization Example
<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();
}
}
<template>
Public Homepage
</template>
export class Home {
}
<!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>
export class Login {
}
<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>
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 });
}
}
<template>
This is a private page.
</template>
export class PrivatePage {
}
<template>
<div class="alert alert-warning">Registration form goes here</div>
</template>
export class Register {
}
body {
padding-top: 50px;
}
.top-menu {
padding: 8px;
}
main {
padding: 10px;
}
.page-host {
padding-top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment