Permission management for single-page applications

With the development of front-end frameworks today, single-page applications are becoming more and more common, which will also face the management of permissions. The following aspects are mainly discussed for VUE:

  • Interface-level permission
  • Page level permissions

Interface-level permission

The permissions of interfaces are generally not very related to the UI library, as illustrated by axios. Commonly used in the management background these need to obtain user login information interface. Using axios’s interceptor is a handy way to do this.

Take a small example: when many interfaces in the background send Ajax requests to get data, the back end (the front end has less means to determine whether the user is logged in, cookie?) In both cases, the user needs to check whether the user has logged in, and the information is reported to the front end, which redirects to the login page. This can be done using the interceptor.

The interceptor

Intercepts requests or responses before they are processed by THEN or catch.

// Add a response interceptor
axios.interceptors.response.use(response= > {
  // What to do with the response data
  return response;
}, error => {
  // Do something about the response error
  return Promise.reject(error);
});
Copy the code
// Add request interceptor
axios.interceptors.request.use(config= >{
  // What to do before sending the request
  return config;
}, error => {
  // What to do about the request error
  return Promise.reject(error);
});
Copy the code

Page level permissions

The page and permission are mainly realized by vue-Router. The basic idea is to register a “front-guard” hook function for the global router. BeforeEach.

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) = > {
  // Check permissions and jump
  next()
})
Copy the code

Each guard method takes three arguments:

  • to:RouteThe target to be entered
  • from: RouteThe current navigation is about to leave the route
  • next: Function:Be sure to call this methodresolveThis hook. Execution effect dependencenextMethod invocation parameters.
    • Next (): Goes to the next hook in the pipe. If all hooks are executed, the state of the navigation isconfirmedConfirmed.
    • Next (false): interrupts current navigation. If the browser’sURLChanged (possibly by user manual or browser back button), thenURLThe address will reset tofromIndicates the IP address of the route.
    • next('/')ornext({ path: '/' }):Jump to a different address. The current navigation is interrupted and a new navigation is performed. You can pass any location object to Next and allow Settings such asReplace: true, name: 'home'And any other options used inrouter-link 的 to prop 或 router.pushIn.
    • Next (error): (2.4.0+) if passednextThe argument to is oneErrorInstance, the navigation is terminated and the error is passed torouter.onError()Registered callback.

Make sure to callnextMethod, otherwise the hook will not beresolved.

conclusion

Front-end single page permission control in different frameworks to achieve the same idea. Those of you who are interested can go and study it.