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

hefju
  • 105

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

回复
阅读 3.8k
3 个回答
✓ 已被采纳
  1. 变量肯定不能跨页面啊。
  2. 跨页面还能保存数据的方案,有 cookie , localStorage , URL 变量传递等。

请使用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);
    });

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)
  }
)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏