Flexible routes setup. Closing routes for authorized / unauthorized users, users with specific roles.
This module is designed for the fact that you already have an authorization system and you need to close the pages for unauthorized / authorized users.
If you find an error, incorrect behavior please open the corresponding
issue.
Please also rate this repository. 😊
$ npm i vue-router-auth
import Vue from 'vue';
import VueRouterAuth from 'vue-router-auth';
const options = {
router,
guard: ({ $auth }) => $auth.loggedIn,
};
Vue.use(VueRouterAuth, options);
or
import { middleware } from 'vue-router-auth';
const options = {
router,
guard: ({ $auth }) => $auth.loggedIn,
};
router.beforeEach(middleware(options));
After which you need to configure the routes:
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: 'login',
component: () => import('pages/Login.vue'),
meta: {
auth: {
access: false,
},
},
},
],
},
{
path: '/account',
component: () => import('layouts/Auth.vue'),
meta: {
auth: {
access: true,
},
},
children: [
{
path: '',
component: () => import('pages/Account.vue'),
},
{
path: 'settings',
component: () => import('pages/Settings.vue'),
},
],
},
];
List of passed options during initialization:
name | default | description | required | type |
---|---|---|---|---|
router | - | app router | true | Object |
guard | () => false |
Function to check access. It has a context argument: to, from, Vue.prototype and the context that was passed in the module option. Use read-only context (must be redefined) | true | Function |
routes | { guest: '/public', auth: '/account' } |
Routes for redirecting authorized, unauthorized users, users with specific roles. | false | Object |
context | {} |
The data that will be available in the functions (guard, redirect) | false | Object |
Also, for full work, you need to configure the meta field in routes:
List of options passed to the meta.auth route field:
name | description | type |
---|---|---|
access | A flag indicating the closure of the route. | Boolean or String |
redirect | route or function returning a route. | Function or Object or String |
guard | individual guard function for a specific route | Function |
functions redirect and guard have the same arguments as the main guard function.
To close the route for unauthorized users, you must specify true in the meta.auth.access route field. To close the route for authorized users, set the meta.auth.access field to false. In this case, the guard function should return true for authorized users and false for unauthorized users. To configure user redirection, use the routes option. guest - the route where the unauthorized user will be redirected, auth - the authorized user. You can also specify the redirection route individually for each route in the meta.auth.redirect field. The guard and redirect functions in the arguments receive a context, to expand it use the context option.
In order to close the route for a specific role in the meta.auth.access route field, you must specify the role name, in this case, the guard function should return a string with the name of this role, otherwise redirection will occur. To configure redirection for a specific role, you need to add a field to the routes option with the name of this role.
import { middleware } from 'vue-router-auth';
import auth from 'auth-module'; // for example
const options = {
router,
guard: ({ auth }) => auth.loggedIn,
context: {
auth,
},
};
router.beforeEach(middleware(options));
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: 'login',
component: () => import('pages/Login.vue'),
meta: {
auth: {
access: false,
},
},
},
],
},
{
path: '/account',
component: () => import('layouts/Auth.vue'),
meta: {
auth: {
access: true,
},
},
children: [
{
path: '',
component: () => import('pages/Account.vue'),
},
{
path: 'settings',
component: () => import('pages/Settings.vue'),
meta: {
auth: {
access: false,
},
},
},
],
},
];
In the example above, the /login route will be closed to authorized users. A route /account will be closed to unauthorized users, but the route /account /settings will be open to unauthorized users and closed to authorized users.
import { middleware } from 'vue-router-auth';
import auth from 'auth-module'; // for example
const options = {
router,
guard: ({ auth }) => auth.user.role, // "admin"
routes: {
admin: '/route-for-not-admin',
},
context: {
auth,
},
};
router.beforeEach(middleware(options));
const routes = [
// ...
{
path: '/account',
component: () => import('layouts/Auth.vue'),
children: [
{
path: 'payments',
component: () => import('pages/Account.vue'),
meta: {
auth: {
access: 'simple-role',
redirect: '/any-route',
},
},
},
{
path: 'settings',
component: () => import('pages/Settings.vue'),
meta: {
auth: {
access: 'admin',
},
},
},
],
},
];