vue 登錄token的思路流程

在前後端完全分離的情況下，Vue項目中實現token驗證大致思路如下：

1、第一次登錄的時候，前端調後端的登陸接口，發送用戶名和密碼

2、後端收到請求，驗證用戶名和密碼，驗證成功，就給前端返回一個token

3、前端拿到token，將token存儲到localStorage/cookie 和vuex中，並跳轉路由頁面

vuex 存不存都無所謂，個人感覺這裏只爲了store管理好看點而已。

4、前端每次跳轉路由，就判斷 localStroage/cookie  中有無 token ，沒有就跳轉到登錄頁面，有則跳轉到對應路由頁面

5、每次調後端接口，都要在請求頭中加token

 

service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)