Brief description

Recently, I have been studying the issue of permission control based on RBAC under the separation of front and backend. When using vue-router to dynamically add routes, a small problem occurred. I need to ask you for help.

The general idea is as follows:

• After the background user successfully logs in, the permission list corresponding to the user is obtained from the server and stored in sessionStorage

• Redirect users to the backend homepage

• In the router.beforeEach() hook, read the permission list data in sessionStorage and call router.addRoutes() to dynamically add routes.

Code

 router.beforeEach(to, from, next)
    {
        ...
        let permission = JSON.parse(window.sessionStorage.getItem('permission'))
        /*permission = [...{"client_route":"/test"}...]*/
        if (permission) {
            let newRoutes = []
            permission.map((item, index) => {
                newRoutes.push({
                    path:'${item.client_route}',
                    component: '../view${item.client_route.slice(1)}.vue',
                    meta:{Auth:true}
                })
            })
            router.addRoutes(newRoutes)
        }
        ...
    }

Here comes the problem

1. Is there any problem with the idea?

2. There is a problem with the above code. I don’t know how to deal with the ${} in path and component. Forgive me for not learning es6 well. ╮(︶﹏︶")╭. My original intention is to load the .vue file

based on the route name returned.

Thank you everyone