vue 前端拦截器

该导什么包？在下也不清楚。我只是代码的搬运工；
拦截器相当于在你的门口放一只狗。

初始化狗子函数 是store下的index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
     
  state: {
     
    user: {
     
      username: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).username
    }
  },
  mutations: {
     
    login (state, user) {
     
      state.user = user
      window.localStorage.setItem('user', JSON.stringify(user))
    }
  }
})

在main.js文件里面，要开启路由的前置判断函数，并在new Vue中引用
就是在你的大门前面放只狗，你总不能放门后面吧。

router.beforeEach((to, from, next) =>
    {
     
        if (to.meta.requireAuth) {
     
            console.log("进入")
            if (store.state.user.username!= "") {
     
                    console.log(store.state.user)    
						next()
                })
            } else {
     
                console.log("弹出")
                next({
     
                    path: 'login',
                    query: {
     redirect: to.fullPath}
                })
            }
        } else {
     
            next()
        }
    }
)
new Vue({
     
    el: '#app',
    render: h => h(App),
    router,
    // 注意这里
    store,
    components: {
      App },
    template: ''
})

最后你要站在门口，告诉狗子，什么人该咬，什么人不咬。
这个是写在router里面的

  meta: {
     
      requireAuth: true // 是否需要拦截
    }

如

 {
     
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
     
      requireAuth: true // 是否需要拦截
    }
  },