1. Preface

In the practice of access control, there are three categories: user, role and permission. A user has a role and a role has a permission. What needs to be explained is the meaning of permissions. Permissions control access to resources. From the perspective of the front end, permissions can be divided into page access permissions, data operation permissions. This blog post is about controlling access to a page based on the user’s role. Let’s start with the routing table.

2. The routing table

The case has three pages, namely home page, designer page, exception page. If the user role is user, users can access the home page, but tourists cannot. Users with the admin role can access the designer page. Other users without the admin role cannot access the designer page. The permission information of the page is mounted in the meta information of the route.

const router = new VueRouter({
  mode: "hash".routes: [{path: "/home".name: "Home".component: () = > import(".. /pages/home.vue"),
      meta: {
        title: "Home page".roles: ["user",}}, {path: "/designer".name: "Designer".component: () = > import(".. /pages/designer.vue"),
      meta: {
        title: "Designer".roles: ["admin",}}, {path: "/auth-error".name: "AuthError".component: () = > import(".. /components/auth-error.vue"),
      meta: {
        title: "No access"}, {},path: "/".redirect: "/home",}]});Copy the code

3. Navigation guard

When a user accesses any page, it is intercepted to check whether the user has permission to access the page. A user with only the user role is not allowed to access the designer page. The logic for interception is as follows:

  router.beforeEach((to, from, next) = > {
    const userRoles = getUserRoles();
    const requiredRoles = to.meta.roles || [];
    if (requiredRoles.length > 0) {
      if (requiredRoles.some((role) = > userRoles.includes(role))) {
        next();
      } else {
        next('/auth-error'); }}else{ next(); }});Copy the code

Here’s the question: How do you get the user’s role in the routing plug-in? User information is generally stored in the Store. Therefore, the problem can be further refined: how to obtain vuex information from vuE-Router.

4. Status plug-ins

Vuex’s store accepts plugins, and the Vuex plugin is a function that takes store as its only argument.

const store = new Vuex.Store({
  state: {... },getters: {... },mutations: {... },actions: {... },plugins: [
    authRouterPlugin
  ]
});
Copy the code

The authRouterPlugin intercepts route changes and determines whether the current user has permission to access the target route. If yes, go through; if no, go to the error notification page. The complete code is as follows:

import router from '@/route/index';

export default function authRouter(store) {
  router.beforeEach((to, from, next) = > {
    const userRoles = store.getters.userRoles;
    const requiredRoles = to.meta.roles || [];
    if (requiredRoles.length > 0) {
      if (requiredRoles.some((role) = > userRoles.includes(role))) {
        next();
      } else {
        next('/auth-error'); }}else{ next(); }}); }Copy the code

5. Reference materials

  • Vuex plug-in
  • Architecture design based on RBAC authority model

6. Case code

Complete case code