A plugin for Vue.js SPAs that protects routes depending on user role. Add your own authentication.
Check out the demo here.
$ npm i vue-router-user-roles -D
First create a Vue Router instance. It's best to do this in a dedicated file and export as a module e.g.
Now you can add this plugin in your main file. You must pass in a router instance as an option
To protect a route, add a
permissions property to each route configuration object under the
Assign an array of objects to this, with each object defining the permissions for a different user role.
The three properties required for permissions objects are:
role- the user role being configured for this route.
access- either a boolean, or function returning a boolean, that defines access for the user. A function will have access to two objects: the
userobject and the route being accessed.
redirect- a route name you wish to redirect to if the user does not have access.
let opts =routes:path: "/protected"name: "protected"component: Protectedmeta:permissions:role: "guest"access: falseredirect: "login"path: "/profile/:id"name: "profile"component: Profilemeta:permissions:role: "registered"userid === toparamsidredirect: "login"role: "guest"access: falseredirect: "login";const router = opts;
A "user" is an object with one required property:
role. Typically this would be set to a string e.g. "guest", "admin" etc.
You can add other properties to this object. You may want to do that if route access is determined by a function, since the function is passed this object. For example, you may create an
id property that could be compared to a route parameter e.g /user/:id
Once the plugin is installed, you can access
user from within your Vue instance or any component as
Set the user
You can set a user with the
set method. Here's an example of setting the user before the first instance of Vue is created:
;;;;Vue;// This would usually be an AJAX call to the server or a cookie check// Let's assume the user hasn't logged in yet so they're a guest for now.let authenticate = Promise;authenticate;
You'll probably set the user again during the lifecycle of the app. For example, a user may start as a guest, but once they're authenticated their role and permissions will change.
You can access
user from within the app as
user object is reactive, so each time you set the user, permissions will be reassessed and will potentially redirect the page if the user no longer has access to the current route.
The other API method available is
<template><div v-if="$user.get().role === 'guest'">...</div></template>
Details changes for each release are documented in the CHANGELOG.md.
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide before making a pull request.