Vue JS 让页面接受 UID 和令牌

Posted 2023-02-24

【中文标题】Vue JS 让页面接受 UID 和令牌

【英文标题】：VueJS getting the page to accept UID & token

【发布时间】：2020-12-05 07:46:13

【问题描述】：

我正在尝试从电子邮件中获取激活链接，以成功地将其 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，我想我需要使用模板对吗？欢迎提出任何建议！

【参考方案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")

【讨论】：

谢谢！是的，我只需要路径参数并且身份验证有效:)