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的使用方法和此类似