Question

我目前正在使用此堆栈开发应用程序（SPA）： Django - GraphQL (graphene-django) - Apollo - VueJS

我最终要进行身份验证，感觉完全迷失了。

我认为有两种方法：

使用来自Django的内置Session系统，但我不知道如何在前端（VueJS中可以在Vuex中拥有状态变量）中获取它的状态（无论是否登录），并且即使有可能。
使用JWT

我目前正在尝试JWT，但是我再次感到完全迷失，因为我读过许多文章说将令牌存储在localStorage或sessionStorage中不是一个好主意。我以这种方式学习了几本教程，然后遇到了一个问题，当第一个过期时，如何获得令牌？就状态而言，我可以在Vuex中处理一个状态变量，该变量调查了localStorage，... 但是由于我读过这种方法不好（XSS攻击，...），所以我决定使用cookie来完成。再一次，我迷路了！当我设法通过jwt_cookie（）获得一次cookie时：

它很快过期，我不知道如何处理它的刷新，也不知道状态是否正确（我是否登录？）

目前，我是这样做的：

带有jwt_cookie的URL：

urlpatterns = [
    ...
    path('graphql', jwt_cookie(csrf_exempt(GraphQLView.as_view(graphiql=True, schema=schema)))),
    ...
]

login（）方法：

    login () {
      this.$apollo.mutate({
        mutation: GET_TOKEN_AUTH,
        variables: {
          username: this.form.username,
          password: this.form.password
        }
      }).then(result => {
        this.LOGIN()
        this.$router.push({ name: 'Home' })
      }).catch(error => {
        console.log('error : ', error)
      })
    }

GET_TOKEN_AUTH突变：

const GET_TOKEN_AUTH = gql`
  mutation getTokenAuth (
    $username: String!,
    $password: String!
  ) {
    tokenAuth (
      username: $username,
      password: $password
    ) {
      token
    }
  }
`

LOGIN（）方法（vuex）：

    LOGIN: (state) => {
      state.isLoggedIn = true
    },

导航员：

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.requiresAuth)) {
    if (store.state.isLoggedIn) {
      next()
      return
    }
    next('/login')
  } else {
    next()
  }
})

如果缺少代码部分，我可以为您提供更清晰的代码。在这里，我给出了最低要求。

我该怎么办？

尝试使用Django会话？在每个请求中都使用带有令牌的JWT吗？还是饼干？又如何？

我真的需要你的帮助。

谢谢。

在Django + GraphQL + Vuejs中处理身份验证

0 个答案: