【前端請求頭中的Authorization和Cookie是如何設置的】

以一個簡單的功能舉例，探究前端請求頭中的Authorization和Cookie是如何設置的。

以后再寫新的系統時，可以讓gateway網關進行統一管理，不再暴露具體的端口號。

后端的代碼已經看過了，這里主要是前端。

這里主要是在 ruoyi-ui/src/utils/request.js 里進行配置的。

這里設置了一個請求攔截器，所有的請求都會先走這個攔截器。

// request攔截器
service.interceptors.request.use(config => {
  // 是否需要設置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
  }
  // get請求映射params參數
  if (config.method === 'get' && config.params) {
    let url = config.url + '?' + tansParams(config.params);
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

可以看到，這個攔截器在前端向后端發送請求的時候，先設置了token。

那么cookies是怎么設置的呢。

其實Cookies是在ruoyi-ui/src/views/login.vue文件中定義的。

可是這里只設置了三個值：username，password，remeberme。

另外兩個值，Admin-Token和Admin-Expires-In是哪來的？

其實，它們是在ruoyi-ui/src/utils/auth.js里設置的。

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

const ExpiresInKey = 'Admin-Expires-In'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

export function getExpiresIn() {
  return Cookies.get(ExpiresInKey) || -1
}

export function setExpiresIn(time) {
  return Cookies.set(ExpiresInKey, time)
}

export function removeExpiresIn() {
  return Cookies.remove(ExpiresInKey)
}

可以看到，auth.js里定義了2個變量：TokenKey 和 ExpiresInKey。

那么，它們是在哪里進行初始化的呢？

再找一通，最后發現是在ruoyi-ui/src/store/modules/user.js里

Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid).then(res => {
          let data = res.data
          setToken(data.access_token)
          commit('SET_TOKEN', data.access_token)
          setExpiresIn(data.expires_in)
          commit('SET_EXPIRES_IN', data.expires_in)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

user.js里定義了setToken()方法。

可是這個Login方法是在哪里用到的呢？

再仔細找找，兜兜轉轉，最后又回到了登錄界面：ruoyi-ui/src/views/login.vue

可以看看，登錄頁面中對於登錄動作是如何處理的。

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            if (this.captchaOnOff) {
              this.getCode();
            }
          });
        }
      });
    }
  }
};

登錄邏輯：

1. 當輸入用戶名，密碼后，如果點擊記住密碼，那么就會往cookies中設置用戶名和密碼，隨后將請求轉發到Login方法進行處理（該方法定義在ruoyi-ui/src/store/modules/user.js中。）
2. Login中實際上是調用ruoyi-ui/src/api/login.js中的login(username, password, code, uuid)方，獲取token
3. 然后再調用ruoyi-ui/src/utils/auth.js中setToken(token)的方法進行賦值。
4. 全局request攔截器，會把每次請求中都加上Authorization