Global front guard

router.beforeEach((to, from, next) = > {
  // ...
})
Copy the code

Each guard method takes three arguments:

  • To: indicates the destination route object to be entered

  • From: Current navigation Route that is about to leave

  • Next: Be sure to call this method to resolve the hook. The execution depends on the call parameters of the next method.

    • next(): Goes to the next hook in the pipe. If all hooks are executed, the state of the navigation isconfirmedConfirmed.
    • next(false): interrupts current navigation. If the browser’sURLChanged (possibly by user manual or browser back button), thenURLThe address will reset tofromIndicates the IP address of the route.
    • next('/')ornext({ path: '/' }): Jumps to a different address. The current navigation is interrupted and a new navigation is performed. You can asknextPass an arbitrary position object and allow setting such asreplace: true,name: 'home'And any other options used inrouter-link 的 to prop 或 router.pushIn.
    • next(error): (2.4.0+) If passednextThe argument to is oneErrorInstance, the navigation is terminated and the error is passed torouter.onError()Registered callback.

Login authentication (Change the jump logic upon successful login)

router.beforeEach((to, from, Next) => {document.title=to.meta. Title // Set the title of the current page if (to.matched. Some (record => Record.meta (localstorage.getitem ('access_token')) {next()} else {if (to.name === 'Login') {// Prevent next infinite loop problem next(); return } next({ path: '/Login', query: { redirect: to.fullPath } }); } } else { next() } })Copy the code

If the login succeeds, you are returned to the page to which you want to jump and the previous page is not the login page

api.login().then((res) = > {
        if (res.success) {
          localStorage.setItem("access_token", res.token);
          // Redirect Successful login returns to the redirect page and the previous page is not the login page
          let redirect=this.$route.query.redirect; 
          redirect ? this.$router.replace(redirect) : this.$router.push("/");
          If the login succeeds, you are returned to the page to which you want to switch and the previous page is not the login page
          let redirect=this.$route.query.redirect || '/';
          this.$router.replace(redirect); }});Copy the code

There is no need to handle a jump in a successful login

router.beforeEach((to, from, next) = > {
  document.title = to.meta.title
  if (to.matched.some(record= > record.meta.auth)) {
    if (localStorage.getItem('access_token')) {
      if (Object.keys(from.query).length === 0) {// Check whether the source of the route has a query
        next()
      } else {
        let redirect = from.query.redirect// If the source route has query
        if (to.fullPath === redirect) {// This line is to solve the next infinite loop problem
          next()
        } else {
          next({ path: redirect, replace: true })// Redirect to the destination route}}}else {
      if (to.name === 'Login') {
        next();
        return
      }
      next({
        path: '/Login'.query: {
          redirect: to.fullPath } }); }}else {
    next()
  }

})
Copy the code

Login page The login page is successful. Go to the page you want to go to. Click the browser to return to the previous page

this.$router.replace('/')
Copy the code