Vuejs错误401未经DRF api授权答案

【问题标题】：Vuejs error 401 Unauthorized from DRF apiVuejs错误401未经DRF api授权
【发布时间】：2019-05-06 04:09:50
【问题描述】：

Vue Js 错误（401 未授权）

使用的软件-

DRF Vuejs

在Vue js中调用DRF api时（使用axios）解包获取数据。

App.vue 中的以下代码

export default {
  name: 'App',
  components: {
    'Header': Header,
    'Footer': Footer,
    'Navbar': Navbar
  },
  data () {
    return {
      info: []
    }
  },
  mounted () {
    var self = this
    axios.get('http://127.0.0.1:8000/management/api/list/')
      .then(function (res) {
        self.info = res.data
        console.log('Data: ', res.data)
      })
      .catch(function (error) {
        console.log('Error: ', error)
      })
  }

【问题讨论】：

请不要张贴代码截图。而是添加一些代码并将它们缩进 4（四个）空格。
下次一定会注意的
现在可以编辑了。

标签： django vue.js django-rest-framework vuejs2

【解决方案1】：

您正在请求一个受保护的 API，并且需要授权凭证可用。

如果您使用 DRF 令牌管理系统，您应该首先从适当的 API 端点获取令牌。然后通过请求中的Authorization 标头传递此令牌。例如，如果您在 django 中使用 jwt 令牌管理系统，那么您应该发送如下请求：

axios.get('http://127.0.0.1:8000/management/api/list/',  { Authorization: `jwt ${token}`})
  .then(function (res) {
    self.info = res.data
    console.log('Data: ', res.data)
  })
  .catch(function (error) {
    console.log('Error: ', error)
  })

请记住，这实际上取决于您使用的身份验证后端。因此，如果您能提供更多有关您如何实现 django DRF API 的详细信息，我想我们都可以为您提供更好的帮助。

【讨论】：

更新您的帖子并在您的 settings.py 文件中添加REST_FRAMEWORK。
REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': ('rest_framework.permissions.IsAuthenticated',), 'DEFAULT_AUTHENTICATION_CLASSES': ('rest_framework.authentication.TokenAuthentication', 'rest_framework_jwt.authentication.JSONWebTokenAuthentication', 'rest_framework. authentication.SessionAuthentication', 'rest_framework.authentication.BasicAuthentication', ), 'DEFAULT_VERSIONING_CLASS': 'rest_framework.versioning.URLPathVersioning', }
您已启用 jwt。所以我建议的方法应该没有问题。你从 API 获得令牌了吗？
如何查看 jwt 令牌？
您有任何 API 可以从服务器获取 jwt 令牌吗？在你的 urls.py 中注册这个 url(r'^api-token-auth/', obtain_jwt_token), 也 read this