如何每次都在axios请求方法加上token

Question

我使用普通的html网页, 通过axios加载数据. 在登录login.html通过后, 拿到服务器端的token. 在后面的所有页面的请求的header上都要带上这个token.
登录成功后我在login.html设置了 axios.defaults.headers.common['Authorization'] = "AUTH_TOKEN";
但到了其他页面, axios的header的Authorization 都是undefined, 请问我应该怎样做才能保证请求都自动带上这个token?

Answer 1

1. 变量肯定不能跨页面啊。
2. 跨页面还能保存数据的方案，有 cookie ， localStorage ， URL 变量传递等。

Answer 2

请使用axios的拦截器

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

Answer 3

axios拦截器（也可以用这个做每次请求之前的loading....） 附上链接链接描述

service.interceptors.request.use( 
  config => {
    // 判断是否登录是否有token ，这里登录时将token存之本地
    const USER_TOKEN = JSON.parse(sessionStorage.getItem('user')) && JSON.parse(sessionStorage.getItem('user')).USER_TOKEN
    // 登录不需要传token,看一下自己登录的接口包含哪个特殊字段
    if(USER_TOKEN && !config.url.includes('login')){
      config.headers.common['USER_TOKEN'] = USER_TOKEN
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)