1, the introduction of

When using vue-router@next to develop routing permission control, there is always some kind of unspeakable helplessness for the project of front and back end separation. This paper mainly introduces the single page front – end routing permission control with front – end separation. Note that I cannot guarantee perfect control of this method, if you want perfect control of route permissions, please abandon this method.

2. Implementation principle

Vue-router controls route permissions using the beforeEach global hook and addroute method to dynamically add routes. If you do not know the specific process of friends can view the previous implementation of the idea diagram; This article is an improved version of the previous one.

  • 1. Process the matching route in the global hook beforeEach, and allow the route if it matches.
  • 2. Make further login judgment for those that are not matched, and jump to login if they are not logged in (note the return address)
  • 3. If you have logged in, check whether you have obtained the menu or route permission from the background. If the route has been obtained, you can directly jump to “No permission”.
  • 4. Obtain the menu or route permission synchronously and dynamically add a route by invoking the route instance addroute method.
  • 5. After the route is added, no route is matched. So you need to manually call next() to jump to the route.

3. Optimization scheme

Compared with the previous scheme, this optimization does not need to edit the corresponding dynamic route in the code. You can use import() to dynamically configure routes to add routes.

Implementation code example:

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
    {
        path: "/".component: () = > import("@/views/home.vue"),}, {path: "/about".component: () = > import("@/views/about.vue"),}, {path: "/login".component: () = > import("@/views/login.vue"),}, {path: "/ 404".component: () = > import("@/views/404.vue"),}, {path: "/permission-deni".component: () = > import("@/views/permission-deni.vue"),},];const router = createRouter({
    history: createWebHistory("/g"),
    routes,
});

const isLogin = function () {
    let login = sessionStorage.getItem("auth");
    return!!!!! login; };async function addRouters() {
    let authRouters = await getAuth();
    authRouters.forEach(({ path }) = > {
        isMenu = true;
        // Dynamic add
        router.addRoute({
            path,
            component: () = > import(`./views${path}.vue`)}); });console.log("> > >", router.getRoutes());
}

// Get permission route
function getAuth() {
    return new Promise<ArrayThe < {path: string} > > ((resolve) = > {
        setTimeout(() = > {
            let authRouters = [
                {
                    path: "/auth/edit"}, {path: "/auth/userinfo",},]; resolve(authRouters); },150);
    });
}

// Route interception
let isMenu = false; // flag whether the menu has been retrieved
router.beforeEach(async (to, from, next) => {
    let { matched } = to;
    letisMatched = !! matched.length;if(! isMatched) {// To match the route
        if (isLogin()) {
            / / have to log in
            if (isMenu) {
                // No permissions
                next("/permission-deni");
            } else {
                // Dynamically add routes
                awaitaddRouters(); next(to.path); }}else {
            / / not logged in
            next("/login"); }}else{ next(); }});export default router;
Copy the code

4, summarize

Again, if you want perfect control of routing permissions please leave it to background control. This paper is just a supplement to the previous optimization and completes the route setting through background system configuration. Of course, there are more details to deal with; Such as nesting, aliasing, SEO, etc. Expand as required.

The complete sample code can be viewed at VUe-auth

If there are mistakes, welcome to correct them. Learn together and make progress together