H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】如何每次都在axios请求方法加上token

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

回答:

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

本文地址:H5W3 » 【Web前端问题】如何每次都在axios请求方法加上token

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址