如何每次都在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拦截器（也可以用这个做每次请求之前的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)

  }

)