vue中发起获取用户信息的接口请求为什么拿不到token值

在Vue中发起获取用户信息的接口请求无法拿到token值可能有几个原因：

1. Token未正确设置或存储：确保在获取用户信息之前，token已经被正确设置或存储到了合适的位置。可以检查代码中设置token的地方，例如在登录成功后将token存储到Vuex、localStorage或cookies中。

2. 请求头未设置Token：在发起接口请求时，需要将token作为请求的一部分发送给服务器。可以通过配置axios或其他HTTP库的请求拦截器，在每个请求中添加token到请求头。

3. Token过期或失效：如果token已经过期或失效，服务器可能会拒绝接受该token进行身份验证。可以尝试在获取用户信息之前，先验证token的有效性，并在需要时重新获取一个有效的token。

4. 接口权限设置错误：确保服务器端的接口权限设置正确，即只有携带有效token的请求才能成功获取用户信息。可以与后端开发人员确认接口权限设置是否正确。

综上所述，如果无法拿到token值，可以逐一排查上述可能的原因，并检查相应的代码和配置。同时，与后端开发人员沟通和协作也是解决问题的关键。

相关问题

uniapp 不用登陆页面获取token 并放在请求头上

UniApp (基于 Vue.js 的跨平台框架) 提供了一种方便的方式来管理用户的登录状态和授权。通常情况下，为了在不显示登录页面的情况下获取 token 并将其添加到请求头里，你可以使用 Uni-app 中的`uni.getUserInfo`或`uni.login`函数结合存储库（如本地存储 LocalStorage 或者 H5 的 sessionStorage）来实现。

首先，用户首次登录后，通过 `getUserInfo` 获取用户信息并同时保存 token 到本地：

uni.login({
  success: function (res) {
    const code = res.code; // 获取code，后续用于换取token
    uni.getUserInfo({
      provider: 'account', // 使用账号密码登录
      success: function(userInfo) {
        // 将token保存到本地，例如LocalStorage
        localStorage.setItem('accessToken', userInfo.openid);
        // 使用token发起请求
        requestWithToken();
      }
    });
  }
})

然后，在需要发送带 token 请求的地方，可以从本地获取 token 并设置到请求头：

function requestWithToken() {
  const accessToken = localStorage.getItem('accessToken'); // 从localStorage读取token

  uni.request({
    url: '你的API地址',
    method: 'GET',
    header: {
      'Authorization': 'Bearer ' + accessToken // 添加 Authorization 头，格式通常是 "Bearer " + token
    },
    success: function (res) {
      console.log(res.data);
    }
  });
}

需要注意的是，这只是一个基本示例，实际应用中还要处理错误情况、刷新 token 和 token 过期等问题。另外，对于一些敏感操作，建议在服务器端验证 token 而非前端。

vue axios请求取消上一次请求 (及请求拦截 响应拦截))

可以使用axios提供的CancelToken来取消上一次请求。具体实现方式如下：

1. 在请求拦截器中创建一个CancelToken实例，并将其作为请求的cancelToken参数传递给axios请求。

import axios from 'axios'

const source = axios.CancelToken.source()

axios.interceptors.request.use(config => {
  config.cancelToken = source.token
  return config
})

2. 在组件中定义一个变量用于存储上一次请求的cancel函数。

export default {
  data() {
    return {
      cancelPrevRequest: null,
      // ...
    }
  },
  // ...
}

3. 发起请求时，先调用上一次请求的cancel函数取消之前的请求，然后再发送新的请求。

axios.get('/api/some-data', {
  cancelToken: new axios.CancelToken(cancel => {
    if (this.cancelPrevRequest) {
      this.cancelPrevRequest('取消上一次请求')
    }
    this.cancelPrevRequest = cancel
  })
}).then(response => {
  // ...
}).catch(error => {
  // ...
})

4. 在响应拦截器中，如果捕获到CancelToken的异常，说明该请求被取消了，可以不做任何处理。

axios.interceptors.response.use(response => {
  return response
}, error => {
  if (axios.isCancel(error)) {
    console.log('请求被取消了')
  } else {
    console.log('请求出错了')
  }
  return Promise.reject(error)
})

这样就可以实现在发送新的请求时自动取消上一次请求。