add authentication requirement

and a mock auth helper
This commit is contained in:
2017-02-14 19:44:30 -07:00
parent 3631f98b58
commit 0996117565
3 changed files with 44 additions and 7 deletions

View File

@@ -0,0 +1,3 @@
export function getUser() {
return Promise.resolve(null);
}

View File

@@ -1,11 +1,21 @@
<template> <template>
<section class="section"> <div id="login" class="container">
<div class="container"> <nav class="nav has-shadow">
<div class="notification"> <div class="nav-left">
Login Here <div class="nav-item is-brand">
<router-link class="nav-item is-brand" to="/">Customer Management</router-link>
</div>
</div> </div>
</div> </nav>
</section>
<section class="section">
<div class="container">
<div class="notification">
Login Here
</div>
</div>
</section>
</div>
</template> </template>
<script> <script>

View File

@@ -3,19 +3,26 @@ import VueRouter from 'vue-router';
import App from './App.vue'; import App from './App.vue';
import Login from './pages/Login.vue';
import Customers from './pages/Customers.vue'; import Customers from './pages/Customers.vue';
import Orders from './pages/Orders.vue'; import Orders from './pages/Orders.vue';
import About from './pages/About.vue'; import About from './pages/About.vue';
import { getUser } from './lib/authentication';
Vue.use(VueRouter); Vue.use(VueRouter);
const routes = [{ const routes = [{
path: '/login', path: '/login',
name: 'login',
component: Login,
}, { }, {
path: '/', path: '/',
name: 'app', name: 'app',
component: App, component: App,
meta: {
requiresAuthentication: true,
},
children: [ children: [
{ {
path: 'customers', path: 'customers',
@@ -41,4 +48,21 @@ const router = new VueRouter({
routes, routes,
}); });
router.beforeEach((to, from, next) => {
// check if any of the matched routes require authentication
if (to.matched.some(record => record.meta.requiresAuthentication)) {
return getUser().then((user) => {
// if user is authenticated, continue
if (user) return next();
// otherwise, redirect to login, preserving the requested route
const { name, fullPath } = to;
const query = (name !== undefined) ? { redirect: name } : { prev: fullPath };
return next({ name: 'login', query });
});
}
return next();
});
export default router; export default router;