Vue 实现登录拦截（三）

这节主要讲解路跳转的拦截的操作、

1.router/index.js

• 引入的localstorage的文件

import { MessageBox } from 'mint-ui';
import { getLogin } from '../assets/script/local.storage'; 
console.info('保存在本地的信息',getLogin().name,getLogin().phone)

• 对原先的routes做一些部分的修改的

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },{
      path: '/home',
      name: 'home',
      component: home,
      meta:{
        login:true  //需要登录的页面
      }
    },{
      path: '/personal',
      name: 'personal',
      component: personal,
      meta:{
        login:true  //需要登录的页面
      }
    },{
      path: '/login',
      name: 'login',
      component: login   
    }
  ]
})

router.beforeEach介绍

router.beforeEach((to, from, next) => {
  // console.info(22, window.location.href)
  //console.info(to,from,next)
  // 对路由变化作出响应...
  // console.log(router,to)
  // console.log(router,to.query, from)
  // console.log(to,$.param( to.query ),window.location.href)

  //全局拦截器的
  if (to.meta.login) {  // 判断该路由是否需要登录权限
    if (getLogin().name && getLogin().phone) {  // 通过store获取当前的token是否存在
      next();
    }
    else {
      MessageBox.alert('未登录，请先登录').then(()=>{ //promise
        next({
          path: '/login',
          query: { redirect: to.fullPath }  // 将跳转的路由path作为参数，登录成功后跳转到该路由
        })
      })

    }
  }
  else {
    next();
  }
})

总结：
1.使用的sessionStorage，而是使用的store的插件来方便的
2.也许在安装包的时候store和mint-ui的会出错，可直接在package.json中直接写上包和版本号，然后npm install的即可
3.mint-ui的库的使用，可参考 官网
4.store的插件的方法
5.可完善的地方：
使用mint-ui的这么大一个库，但是我们只需要MessageBox 的效果，我们可以指定某一个css和js来引入的，这样体积小了很多的。
实现的方法如下
main.js

import MessageBox from 'mint-ui/lib/message-box'
import 'mint-ui/lib/message-box/style.css'
window.MessageBox  = MessageBox ;//挂在window的对象中，就不用每个文件需要引入，方便又省事，axios的使用方法和此类似