preface

Recently, a backstage management system of the company was too old and difficult to maintain, so I proposed the idea of reconfiguration to the group leader, who decided to hand over the banner to me, and just released itvue3, no doubt, technology selectionvue3andelement-plusThis pair of best friends, under the condition of the same back-end interface refactoring, that is, only change the front end, the back end is not moving, suddenly feel that this period of time can not touch fish

The body of the

When I used addRoues to add a route, I reported an error. By droues, I added a route by default

At first I thought I was wrong. Why are there twoaddRoute, once felt that the official is not wrong, was forced to accept, there is no no, withaddRouteOk, so createpermissionFile:

    // permission.js

    import router from './router'

    // Get the processed route
    let routes= await store.dispatch('user/getRoutes')
    routes.forEach(item= > router.addRoute(item))
    next()
Copy the code

Well, that’s fine. When you refresh the page, it’s time for a miracle

Could not get path, so route was not added? Fortunately, routing provides getRoutes for retrieving routing records and rearranging them

    // permission.js

    import router from './router'

    // Get the processed route
    let routes= await store.dispatch('user/getRoutes')
    routes.forEach(item= > router.addRoute(item)
+   console.log(router.getRoutes(), 'getRoutes')
    next()
Copy the code

What you see is that the route has been added

Think about it, is the implementation of sequential issues? A frog in a well, touching your stomach (there’s only one truth)

When you refresh the page, the vUE will re-instantiate and intercept the route. By the time the addRoute has been executed, the route has not been added yet, which explains why the vue does not have the route.

So why the blank screen?

By the time you reach addRoute, a route will have been added. However, the route is not responsive, and the screen will be blank if the route is not found in the address bar, unless 404 is set

How to solve it? It’s easy. Just make one more interception

Complete implementation

    // permission.js
    
    // Record the route
+   let hasRoles = true
    // Whitelist (list that can be accessed without login)
    const whiteList = ['/login']
    
    router.beforeEach(async (to, form, next) => {
      let userInfo = getStorage('userInfo')? .accountIdif (userInfo) {
        // If there is a token
        if (to.path === '/login') {
          // If you are in the login state and enter the login page, jump to the home page
          next({ path: '/'})}else {
          // Get the processed route
          let routes= await store.dispatch('user/getRoutes')
          
          // The route is added and not updated in time
+         if (hasRoles) {
            routes.forEach(item= > router.addRoute(item))
+           hasRoles = false+ next({ ... to,replace: true }) // This is equivalent to pushing to a page without entering route interception+}else {
            next() // If no argument is passed, route interception will be performed again to enter here+}}}else {
        if (whiteList.includes(to.path)) {
          next()
        } else {
          next(`/login? redirect=${to.path}`)}}})Copy the code

This will solve the problem of a blank screen.

Write in the last

This is the second article I wrote in Nuggets. Compared with the first article, the content is much richer and the words are full. This topic is also what I encountered in the project, and I have referred to many great gods’ practices in Baidu, but they generally say next({… to, replace: True}) into a can, so didn’t say a specific reason, CV and no deficiency, into the infinite loop, a day, so I write this beginner’s mind is that I wish to meet friends can know why this problem will appear white, and how to solve, you may think this way is not very good, welcome to put forward a better way, Suggestions and queries are also welcome