//router.js
{
 path: "/index",
 name: "index",
 component: resolve => require(['./index.vue'], resolve),
 meta: { 
  requiresAuth: true 
 }
} 

router.beforeEach((to, from, next) => {
 //matched的數(shù)組中包含$route對象的檢查元字段
 //arr.some() 表示判斷該數(shù)組是否有元素符合相應(yīng)的條件, 返回布爾值
 if (to.matched.some(record => record.meta.requiresAuth)) {
  //判斷當(dāng)前是否有登錄的權(quán)限
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 確保一定要調(diào)用 next()
 }
})

// http request 攔截器
axios.interceptors.request.use(
 config => {
  if (store.state.token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
   config.headers.Authorization = `token ${store.state.token}`;
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 });

// http response 攔截器
axios.interceptors.response.use(
 response => {
  return response;
 },
 error => {
  if (error.response) {
   switch (error.response.status) {
    case 401:
     // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁面
     store.commit(types.LOGOUT);
     router.replace({
      path: 'login',
      query: {redirect: router.currentRoute.fullPath}
     })
   }
  }
  return Promise.reject(error.response.data) // 返回接口返回的錯誤信息
});

 //login.vue
 methods: {
  login(){
   if (this.token) {
    //存儲在本地的localStograge中
    this.$store.commit(types.LOGIN, this.token)
    //跳轉(zhuǎn)至其他頁面
    let redirect = decodeURIComponent(this.$route.query.redirect || '/');
    this.$router.push({
     path: redirect
    })
   }
  }
 }

import Vuex from 'vuex';
import Vue from 'vue';
import * as types from './types'

Vue.use(Vuex);
export default new Vuex.Store({
 state: {
  user: {},
  token: null,
  title: ''
 },
 mutations: {
  //登錄成功將, token保存在localStorage中
  [types.LOGIN]: (state, data) => {
   localStorage.token = data;
   state.token = data;
  },
  //退出登錄將, token清空
  [types.LOGOUT]: (state) => {
   localStorage.removeItem('token');
   state.token = null
  }
 }
});

export const LOGIN = 'login';
export const LOGOUT = 'logout';