vue login access control - guarding the route

// NProgress progress bar style, import incorporated 
// Import from nProgress 'nProgress' 
// Import 'nProgress / nprogress.css' 
// NProgress the Configuration whether a circular motion effect 
//NProgress.configure (showSpinner {:} to false)   

const = AUTH_WHITE_LIST [ '/ login', '/ 401'] // whitelist route 
// routing processing - login authentication 
router.beforeEach (the async (to, from, Next) => { 
  // start progress bar 
  NProgress.start () 

  / / settings page title 
  IF (to.matched.length == 0!) { 
    document.title = 'page title' + (to.meta.title === undefined '' : '-' + to.meta.title?) 
  } 
  // when determining whether to log, because the page has not refreshed the memory token information, additional session judge once from the 
  iF (! AuthUtils.isLogin ()) { 
    const SessionStore = SessionStorageUtils.getStore ()
    store.replaceState (Object.assign ({}, store.state, SessionStore)) sessionStore))
  }

  IF (AuthUtils.isLogin ()) { 
    // already logged in, you can not jump to the landing page, jump to home 
    if (to.path === '/ Login') { 
      Next ({path: '/'}) 
      NProgress.done () 
    } {the else 
      iF (to.matched.length === 0) {// to.matched.length representative of the current to match Jump route 
        next ( '/ 404') // unknown error page page- 
        NProgress.done () 
      } the else IF (to.meta &&! AuthUtils.hasAuth (to.meta.auth)) {// need to verify the current routing whether it has permission, no jump 404, there continues to go 
        next ( '/ 404') // jump without authority 404 
        NProgress.done () 
      } {the else 
        Next () 
        NProgress.done () 
      } 
    } 
  } the else { 
    IF (AUTH_WHITE_LIST.indexOf (to.path)! == -1) {// whitelist to continue normal walk 
      Next () 
    } the else IF (to.matched.length === 0) { 
      Next ( '/ 401 ') // unknown error page also adjust 
    } the else { 
      // not logged in, not in the white list, the redirect to the landing page 
      the Next ( `/ the login? redirect = $ {}` to.path) 
      NProgress.done () 
    } 
  } 
}) 

router.afterEach (() => {// jump is completed, the end of the progress bar 
  // complete progress bar 
  NProgress.done () 
})

Keywords explained:

• to.match --- "to.matched array, the array holds all routing information to match --------> with to.matched not directly use to.meta is because the former than just give Add high-level routing Auth (permission) to all the children under its route does not have to be added.
• replaceState --- "changed the history of the corresponding store, update store

Object.assign()

1. Object.assign () ---- "all enumerated attribute values ​​are copied from one or more source object to the target object, then returns audiences
2. Object.assign () --- "is ES6 newly added interface, the main purpose is to combine multiple objects of JavaScript.
3. Object.assign () ----- "interface may receive a plurality of parameters, the first parameter is the target object, the latter is the source object, the method ASSIGN original properties and methods of a plurality of objects are merged into a destination object of the same name attribute (method) before, if the property of the same name (method) occurs in this process, the combined properties (method) will be covered.