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>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="notification">
|
||||
Login Here
|
||||
<div id="login" class="container">
|
||||
<nav class="nav has-shadow">
|
||||
<div class="nav-left">
|
||||
<div class="nav-item is-brand">
|
||||
<router-link class="nav-item is-brand" to="/">Customer Management</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="notification">
|
||||
Login Here
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -3,19 +3,26 @@ import VueRouter from 'vue-router';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
import Login from './pages/Login.vue';
|
||||
import Customers from './pages/Customers.vue';
|
||||
import Orders from './pages/Orders.vue';
|
||||
import About from './pages/About.vue';
|
||||
|
||||
import { getUser } from './lib/authentication';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [{
|
||||
path: '/login',
|
||||
|
||||
name: 'login',
|
||||
component: Login,
|
||||
}, {
|
||||
path: '/',
|
||||
name: 'app',
|
||||
component: App,
|
||||
meta: {
|
||||
requiresAuthentication: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'customers',
|
||||
@@ -41,4 +48,21 @@ const router = new VueRouter({
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user