Vue JS 让页面接受 UID 和令牌

Question

我正在尝试从电子邮件中获取激活链接，以成功地将其 UID 和令牌传递到将对其进行身份验证的 vue 页面。

我的文件夹结构目前设置为 .../registration/activate/_uid/_token.vue，但这会导致注册链接显示 404 页面。

我尝试使用额外的令牌设置 /_uid/_token/_token.vue 以查看会发生什么，它让 token.vue 渲染，但我不认为参数正在传递。我还在控制台中收到“路径中的重复参数键：“/registration/activate/:uid?/:token?/:token?”错误。

<template>
  <v-container>
    <v-card v-if="status === 'pending'" class="pa-8 text-center">
      <p class="title">Please wait</p>
      <p class="body-1">Checking registration status...</p>
    </v-card>
    <v-card v-if="status === 'success'" class="pa-8 text-center">
      <p class="title primary--text">Activation successful</p>
      <p class="body-1">You may now log in.</p>
      <v-btn color="primary" text @click="navigateToLogin">Log In</v-btn>
    </v-card>
    <v-card v-if="status === 'error'" class="pa-8 text-center">
      <p class="title error--text">Invalid activation token</p>
      <p class="body-1">This token is invalid. Please try again.</p>
    </v-card>
  </v-container>
</template>

<script>
export default {
  auth: false,
  data: () => ({
    status: 'pending'
  }),
  mounted() {
    
    this.$axios
    
      .post('/auth/users/activation/', this.$route.params)
      .then((response) => {
        this.status = 'success'
      })
      .catch(() => {
        this.status = 'error'
      })
  },
  methods: {
    navigateToLogin() {
      this.$router.push('/login')
    }
  }
}
</script>

这是一个注册链接的例子。

http://localhost:3000/activate/MTg/5j2-d0af1770a53f1db2a851

另一个我无法完全解决的问题是，因为我使用 python 作为后端，我应该使用 python 模板来提交 UID 和令牌，还是想办法在根目录下发送电子邮件localhost:3000（我的前端）与 :8000（我的后端）。

目前我的 settings.py 的注册链接如下所示：

 'ACTIVATION_URL': 'registration/activate/{uid}/{token}',

整个 API 的根目录是 localhost:8000。因此，如果我无法弄清楚如何仅为此链接手动将其设置为 3000，我想我需要使用模板对吗？欢迎提出任何建议！

Answer 1

问题在于您的路径声明。在 Vue 中，您应该像这样在路径中声明一个参数：

 path: "/registration/activate/:uid/:token"

在此之后，如果您输入 http://localhost:3000/activate/MTg/5j2-d0af1770a53f1db2a851，您的 this.$route.params 应该如下所示：

{"uid":"MTg","token":"5j2-d0af1770a53f1db2a851"}

你的 axios 请求很好。

并且因为如果您使用 django，您将向服务器发送 JSON，您可以使用此代码来获取请求的正文：

def avtivate(request):
  if request.is_ajax():
    if request.method == 'POST':
        print 'Raw Data: "%s"' % request.body   
  return HttpResponse("OK")