Блог

У меня есть проект, и в этом проекте я хочу сначала создать страницу регистрации, поэтому у меня есть следующий сценарий: когда пользователь нажимает кнопку Регистрация , отображается сообщение о том, что сообщение отправлено на его электронную почту, сообщение отправляется на его электронную почту, и он должен перейти на свою электронную почту, чтобы подтвердить свою электронную почту и подтвердить свою учетную запись на моем сайте, но если сообщение не отправлено, он должен, чтобы пользователь мог нажать на кнопку «Отправить ссылку активации», которая появляется на картинке. проблема в том, что существует этот api, который был создан на задней стороне для использования на передней стороне:

            router.get('/reactivate/:email', accountController.resendActivationLink);
 

Этот api полезен, когда вы нажимаете «Отправить ссылку активации повторно», чтобы отправить сообщение на электронную почту.
Но на лицевой стороне есть ошибка, так как сообщение не отправляется, отмечая, что я не знал, как отправить api.
Это код «подтверждающей почты», означающий этот интерфейс, созданный с помощью VueJS.
Как решается эта проблема?
Подтверждающая почта.Vue:

 <template>
  <v-container class="mt-10">
    <v-layout row class="padding mb-9 ">
      <v-flex xs3 sm5 offset-sm3>
        <v-card
          class="mx-auto mt-5 pa-5 text-center secondary"
          max-width="1000"
          max-height="2000px"
          id="limited-products"
          outlined
        >
          <v-btn class="ma-2 mt-10 ml-10 mr-10 icon-size" outlined fab color="blue" large>
            <v-icon large class="icon-size" color="blue darken-2">
              mdi-email
            </v-icon>
          </v-btn>

          <v-layout row class="pt-10">
            <v-flex xs12>
              <div class="text-center phase-style">
                Verify Your email address
              </div>
            </v-flex>
          </v-layout>

          <span class="SeparatorRow LoginDefaultView-separatorRow pt-6 ml-15 mr-15"
            ><span class="SeparatorRow-horizontalLine"></span
            ><span class="SeparatorRow-horizontalLine"></span
          ></span>

          <v-layout row class="p-long-style pt-6 ml-15 mr-15">
            <v-flex xs12>
              <div>
                We sent you an email to verify the email. Please check the email
                to activate your account. 
                
                <div class="mt-10 p-size">If you do not receive any message on
                your email, press the button to resend the message again.</div>
              </div>
            </v-flex>
          </v-layout>

          <v-layout row>
            <v-flex xs12 class="pt-8 pb-8  ml-15 mr-15">
              <v-btn
                @click="onConfirmEmail"
                class="blue darken-2 color myfont font-weight-bold "
                align="center"
                justify="center"
                block
                large
              >
                Resend Activation Link
              </v-btn>
            </v-flex>
          </v-layout>

          <span class="SeparatorRow LoginDefaultView-separatorRow pt-6">
            <span class="SeparatorRow-horizontalLine1"></span
          ></span>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { mapActions } from "vuex";
import ActionsTypes from "../store/types/actions-types";

export default {
    
    methods:{
         ...mapActions({
      confirmEmail: ActionsTypes.GET_REACTIVATION_EMAIL_ACTION
    }),
        onConfirmEmail(){

      this.confirmEmail()
        .then((res) => {
          console.log("This is the result to Verify Email:" ,res);
            this.$router.push("/signin");
        })
        .catch((error) => {
          console.log(error);
        });

        }
    }
}
</script>
<style scoped>
.button {
  background: #b92c28 !important;
  color: aliceblue !important;
  display: flex;
}

.myfont {
  font-family: "Mansalva", cursive;
  color: #e8ecee;
}

.color {
  color: #fafafa;
}

.padding {
  padding-top: 30px;
}

.icon-size {
  font-size: 40px;
}

.phase-style {
  font-size: 28px;
}

.p-long-style{
    font-size: 19px;
}

.p-size{
  font-size: 14px;
}
.SeparatorRow {
  align-items: center;
  display: flex;
  text-align: center;
}

.SeparatorRow-horizontalLine {
  border-top: 1px solid #e8ecee;
  flex: 1 1 auto;
  margin-top: 8px;
  min-width: 1px;
  padding-top: 8px;
}

.SeparatorRow-horizontalLine1 {
  border-top: 1px solid #e8ecee;
  flex: 0.1 0.1 auto;
  margin-top: 8px;
  min-width: 0.5px;
  padding-top: 8px;
}

.LoginDefaultView-separatorRowLabel {
  color: #cbd4db !important;
  font-size: 16px;
}
</style>
 

И это Файл действий.
actions.js:

 import { email } from "vuelidate/lib/validators";
import api from "../../../../axiosWithDelimiterFile";
import ActionsTypes from "../types/actions-types"
import MutationsTypes from '../types/mutations-types'
const actions ={
      async [ActionsTypes.GET_REACTIVATION_EMAIL_ACTION](_, userData) {
        console.log('userData: ', userData);
        email = userData.email;
        return new Promise((resolve, reject) => {
          api
            .post("/account/reactivate/", email)
            .then((response) => {
              console.log("The request is successed")
              resolve(response);
            })
            .catch((error) => {
              console.log(error);
              reject(error);
            });
        });
      }
}
export default actions;
 

И этот файл, по которому api определяется с внутренней стороны, и это NodeJS.
account.route.js:

 const express = require("express");
const router = express.Router()
const accountController = require('../controllers/account.controller');
router.get('/reactivate/:email', accountController.resendActivationLink);       
module.exports = router;
 

И это функция повторной отправки сообщения на электронную почту через серверную часть, которая является NodeJS.
account.controller.js:

 const userService = require("../services/user.service");
const operationsCodes = require("../utils/operations-codes");

module.exports = {
  resendActivationLink: async (req, res) => {
    const email = req.params.email;
    const response = await userService.resendActivationLink(email);
    return res
    .status(operationsCodes.getResponseCode(response.code))
    .json(response);
  }
};
 

Хорошее начало для этого! Однако похоже, что вы, возможно, неправильно вызываете свою точку доступа API. Рассматриваемая конечная '/reactivate/:email' точка подразумевает, что вам нужно использовать конечную точку следующим образом:

api.get('/reactivate/user@gmail.com')

вместо

api.post("/account/reactivate/", email)

и ваш API обработает этот адрес электронной почты как req.params.email .

Обратите внимание, что я использую GET запрос, а не POST запрос, и просто включаю адрес электронной почты и часть конечной точки.