The processing of dynamic routing in vue single page mode

there is such a background system, which is divided into many systems and modules, which involves a lot of operation permissions, and each lander is assigned different permissions, so the operable menus and visible pages are also different.

the previous scheme is to write the routing table of the full front-end page, and then filter Filter according to the routing table available to the lander returned by the background to get the actual displayable configuration, which is OK.

but on our platform, menus, permissions and modules can be configured, and the names and paths of these menus can be configured. As a result, once the business is modified, the error will be reported on the white screen if the front-end route is not correct, which is very fragile.

I have two questions:
1. If you first request to obtain the routing table = > mount route = > mount the vue instance, is this method of OK (failed attempt, always report error)?
2. In addition to server-side rendering, is there any other way to solve this kind of problem?

Vue.js vue-router vuex element-ui javascript
Feb.27,2021

at the beginning, the system only has the login page route, logs in to obtain user information and routing table, generates the front segment route based on the return routing table of the backend, and adds the front segment route to the total route through addRoutes, so that the front end only needs to load the route that the user has permission to view based on the return of the backend. Permission control at the specific button level can also be controlled through backend return control

dynamic configuration routing you must have configured it wrong

permission control is done by the backend, which returns different status codes 403 401 according to whether you have permission, and then the front end is only responsible for reminding the user that the permission is insufficient, emptying the data where the data should be placed, but rendering the basic page structure.

I wonder if this will meet your needs

Previous: How to set the input box of element when there is no content, the width is 0 and the width is adaptive when there is content.

Next: Jquery sibling, clicked and did not respond. I don't know what the problem is.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30583-340b7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30583-340b7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?