Here will not introduce the specific implementation of the way, according to the business of the company to adjust, the following talk about the basic design ideas.

Permissions of design is critical for a background, but also want to choose according to the circumstance, such as we won’t be in a blog or personal website write access control in the background, because it is not necessary, but for different user oriented products is very necessary, for example, drops a taxi passengers and drivers must be two different users of the product, How to manage the data inside need to reference the function of permission design.

Permission design can help us to increase information security, to ensure the simplicity of the page without misoperation things, the following is the basic components

composition

  • permissions

    Permissions can be divided into page permissions, function permissions and data permissions. Page permissions refer to whether you can access the current page, function permissions correspond to (add, delete, modify, etc.), and data permissions refer to the range of data that can be accessed.

  • role

    In a mature background design must appear role, this is to avoid every new user will have to check again for him, by role assigned to user permissions, role this layer is equivalent to an intermediate layer, but also convenient maintenance.

  • The user

    Each user has one account. By default, the user is assigned a minimum operation permission. The permission is assigned by roles.

extension

The above is actually a simple concept of RBAC model. In the actual development, at least the following points need to be noted:

  • admin

After development, reserve an admin or super administrator for the role to facilitate maintenance

  • Priority of the permission

The above describes the composition of permissions, but the page permissions should be greater than the operation permissions, only the page permissions visible, functional permissions are meaningful

  • tips

A message is displayed indicating that the page is inaccessible, the page does not exist, or a server error occurs

The last

Finally, let’s talk about how the front-end handles tips 403, 404 and 500

500

500 processing can be done via axions’ interceptor, which now returns the base format by default on the back end

{
  / / status code
  status: 200.data: {},
  // ...
  }
Copy the code

So if something goes wrong with the server, we can just go through

// Add request interceptor
axios.interceptors.request.use(
  function(config) {
    // What to do before sending the request
    return config;
  },
  function(error) {
    // What to do about the request error, this step can directly return to the server error, easy to customize the message
    return Promise.reject('Server error'); });Copy the code
404

404 can be implemented using a router. I’m using a Vue router for this example. Suppose you have a set of routes

const router = new VueRouter({
  routes: [{path: "/user".component: User,
      children: [{path: "profile".component: UserProfile
        },
        {
          path: "posts".component: UserPosts
        }
      ]
    },
    {
      path: "/sign".component: sign
    }
  ]
});
Copy the code

Then we would all routing through recursive Mosaic one-dimensional array (pay attention to the conditions of contrast, I contrast here is that the path so the will of the father in the process of recursive path together), specific recursive implementation depends on your common, here is not making a presentation, don’t exist after comparing access path routing information, there is no shows there is no return 404 page

403

The implementation of 403 needs to work with the backend. Generally, the system requests the user’s operation permission and returns the menu that the user can operate. Then, the system compares the menu that the user can access with the routing information.

Finally, the reason why * is not used, because it is not very customizable, we give a user the first item of the menu in the form of ‘/’ by default, but if ‘/’ does not exist in the route we have to write extra judgments, it is better to do it all ourselves.

reference

  1. 100 solutions to role permission design