Vue Implements login interception (iii)

This section mainly explains the intercept operation of the road jump, the 1.router/index.js introduced by the Localstorage file

Import {MessageBox} from ' Mint-ui ';
Import {GetLogin} from '. /assets/script/local.storage '; 
Console.info (' stored in Local information ', GetLogin (). Name,getlogin (). Phone)

To make some modifications to the original routes.

Const ROUTER = new Router ({
  routes: [
    {
      path: '/',
      Name: ' Hello ',
      component:hello
    },{
      Path: '/home ',
      name: ' Component:home ',
      meta:{
        login:true  //page to login
      }
    }, {
      path: '/personal ',
      name: ' Personal ',
      component:personal,
      meta:{
        login:true  // Page to login
      }
    },{
      path: '/login ',
      name: ' Login ',
      component:login   
    }
  ]
})

Router.beforeeach Introduction

router.beforeeach (to, from, next) = {//Console.info (+, window.location.href)//consol E.info (To,from,next)////////Console.log (router,to)//Console.log (Router,to.query, from)//Console.lo G (To,$.param (To.query), window.location.href)//Global Interceptor if (To.meta.login) {//Determine if the route requires login permission if (GetLogin (). Nam
    E && getlogin (). Phone) {//To get the current token from the store if there is a next ();
          } else {Messagebox.alert (' Log in first '). Then (() =>{//promise Next ({path: '/login ',
  Query: {Redirect:to.fullPath}//will jump route path as parameter, jump to the route after successful login})}} else {next (); }
})

Summarize:
1. Use the sessionstorage, but use the store plug-in to facilitate the
2. Maybe the store and Mint-ui will be wrong when installing the package, you can write the package and version number directly in the Package.json, then NPM install can
3.mint-ui use of the library, can refer to the official website
4.store plug-in method
5. The perfect place to be:
Using the mint-ui of such a large library, but we only need the effect of the MessageBox, we can specify a certain CSS and JS to introduce, so the volume is much smaller.
The method is implemented as follows
Main.js

Import MessageBox from ' Mint-ui/lib/message-box '
import ' mint-ui/lib/message-box/style.css '
window. MessageBox  = messagebox;//The object that hangs in window, does not need each file to introduce, convenient and easy, Axios use method and this similar