add authentication requirement
and a mock auth helper
This commit is contained in:
3
src/lib/authentication.js
Normal file
3
src/lib/authentication.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export function getUser() {
|
||||||
|
return Promise.resolve(null);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user