用户未验证时提示登录

Question

我给出了一个任务，当用户尝试网站的功能时，他们需要像其他网站一样登录他们的帐户来继续。我已经用尽了所有选项，但不知道如何实现。有办法解决这个问题吗？如果是的话，步骤是什么以及我需要什么。我使用了 Vue、Pinia 和 Tailwind。

他们必须访问 NavBar.vue 中的登录模式

<div v-if="showLoginModal" class=" fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75">
      <div class="relative bg-white lg:w-[70vw] w-[90vw] h-fit rounded-3xl">
        <img src="@/assets/images/Modal/Intersect.png" alt="" class="w-full absolute rounded-t-xl">

        <!-- Modal Content -->
        <div class="relative top-0 flex justify-end">
          <button class="absolute  pr-4 pt-4">
            <svg @click="closeOTP" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="5"
              stroke="black" class="w-7 h-7">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div class="relative z-10 flex flex-col items-start justify-center h-fit lg:mt-[5rem] mt-[5rem] lg:ml-[6%] m-8">
          <div class="mt-5 mb-5">
            <h2 class="text-2xl lg:text-3xl font-bold">Welcome!</h2>
            <p class="text-xs lg:text-sm">Please log in to your account.</p>
          </div>

          <form @submit.prevent="login" class=" lg:w-[40%] h-fit md:w-[40%] w-full mr-8">
            <!-- username -->
            <div class="relative mb-4 w-full md:w-365">
              <label for="username" class="block text-gray-700">Enter Username</label>
              <div class="relative">
                <img src="@/assets/images/Modal/profile.png" class="absolute inset-y-0 left-0 mx-5 my-3"
                  style="width: 15px;" alt="Username Icon" />
                <input type="text" id="username" v-model="username" @input="validateUsername"
                  class="w-full h-8 py-5 pl-10 border border-black rounded-xl" placeholder="Username">
                <span v-if="usernameError" class="text-red-500 text-xs">{{ usernameError }}</span>
              </div>
            </div>
            <!-- login password -->
            <div class="relative mb-4">
              <label for="lpassword" class="w-full text-gray-700">Enter Password</label>
              <div class="relative w-full">
                <img src="@/assets/images/Modal/profile.png" class="absolute inset-y-0 left-0 mx-5 my-3"
                  style="width: 15px;" alt="Username Icon" />
                <img v-if="showPassword" src="@/assets/images/Modal/view.png"
                  class="absolute inset-y-0 right-0 mx-3 my-3" style="width: 15px; cursor: pointer;" alt="Eye Icon"
                  @click="togglePasswordVisibility">
                <img v-else src="@/assets/images/Modal/hidden.png" class="absolute inset-y-0 right-0 mx-3 my-3"
                  style="width: 15px; cursor: pointer;" alt="Eye Icon" @click="togglePasswordVisibility">
                <input id="lpassword" v-model="lpassword" @input="validateLPassword"
                  :type="showPassword ? 'text' : 'password'"
                  class="w-full h-8 py-5 pl-10 border border-black rounded-xl" placeholder="Password">
                <span v-if="lpasswordError" class="text-red-500 text-xs">{{ lpasswordError }}</span>
              </div>
            </div>

            <div class="hidden lg:block lg:flex items-center justify-between mb-4">
              <p class="text-xs">Don't have an account? <button @click="openPrivacyModal"
                  class="text-xs font-bold text-blue-600">Sign Up</button></p>
              <button @click="openForgotModal" class="text-xs text-blue-600 font-bold">Forgot Password?</button>
            </div>

            <div class="hidden lg:block lg:mt-10 text-center">
              <button type="submit"
                class="lg:w-[8rem] w-full lg:px-4 py-2 text-white disabled:bg-blue-400 bg-blue-600 rounded-md"
                :disabled="!isLoginFormValid" @click="login">Login</button>
            </div>

            <div class="lg:hidden lg:mt-10 text-center">
              <button type="submit" :disabled="!isLoginFormValid" @click="login"
                class="lg:w-[8rem] w-full lg:px-4 py-2 lg:mb-10 text-white disabled:bg-blue-400  bg-blue-600 rounded-md">Login</button>
              <button @click="openForgotModal" class="text-xs text-blue-600 mt-1">Forgot Password?</button>
              <button @click="openPrivacyModal"
                class="w-full mt-8 py-2 border border-blue-400 text-blue-600 bg-white rounded-md">Sign Up</button>
            </div>
          </form>
        </div>
      </div>
    </div>

Answer 1

您正在寻找“身份验证中间件”。

请参阅：“https://router.vuejs.org/guide/advanced/navigation-guards.html