思路：

前端驗證

1、路由meta中儲存是否需認證欄位

//   meta:{
//     requireAuth:true //需要登入驗證
//   },

2、使用vue-router的全域性前置守衛進入路由前判斷該路由是否需要登入驗證

router.beforeEach((to,from,next)=>{
  if(to.meta.requireAuth){ //是否需要登入許可權
    ...
  }else{
    next();
  }
});

3、獲取快取（這裡使用store）中是否有token欄位沒有則跳轉至登入頁面並儲存當前請求路徑

if(store.state.token){
      next()
    }else{
      next({
        path:'/login',
        query:{redirect:to.fullPath}
      })
    }
 

4、為處理重新整理頁面store中資料清除導致每次都得重新登入可以在儲存token至store中同時儲存一份至localstorage中

new Vuex.Store({
    state: {
        token: null,
      },
      mutations: {
        login: (state,data)=> {
            localStorage.token=data
            state.token=data
        },
        logout: (state,data)=> {
            localStorage.removeItem('token')
            state.token=null
          }
      }
})
 

//頁面重新整理，重新設定token
if(window.localStorage.getItem('token')){
  store.commit(types.LOGIN,window.localStorage.getItem('token'))
}

後端驗證

1、使用axios請求攔截器在傳送請求前判斷是否有token有則新增到請求頭中無則跳轉至登入頁面

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);
    });
 

2、使用axios響應攔截器獲取響應前判斷token是否失效

axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token資訊並跳轉到登入頁面
                    store.commit(types.logout);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回介面返回的錯誤資訊
    });