axios 未连接到凭据提供程序侧基nuxt身份验证

gxwragnw  于 2023-01-17  发布在  iOS
关注(0)|答案(1)|浏览(152)

我正在为我的应用程序使用sidebase nuxt auth。我正在尝试通过axios连接到我的数据库。这段代码可以工作,我没有从数据库得到错误,但没有通过sidebase auth。结果返回true,但同时我被抛出到一个授权错误的页面。在index.vue中,我从useSession()= not authorized得到状态。你能帮助我吗?

这是文件index.vue,其中是表单定义

<template>
  <section class="agents-enter">
    {{status}}
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-7 d-flex flex-column">
          <SectionTitle
              title="Партнерам"
              subtitle="Приглашаем агентов к сотрудничеству по продаже автобусных билетов"
              description="Описание о том, что это и как это работает"
          />
          <!-- <img v-if="!isMobile()" class="image-section" alt="Агенты" src="/img/agents/agents.svg"> -->
        </div>
        <div class="col-12 col-lg-6 col-xl-5 d-flex justify-content-end">
          <div class="login-form-wrapper">
            <div class="login-form">
              <h3 class="title-form text-center">
                Вход для агентов
              </h3>
              <form @submit.prevent="signIn('credentials', { username: userStore.username, password: userStore.password })">
                <!--                      TODO добавить is-ok-bordered или is-error-bordered для валидации-->
                <div class="form-group">
                  <label for="login" class="form-label">Эл. почта</label>
                  <div class="position-relative">
                    <input v-model="userStore.username" id="mail" type="text" class="form-control" name="mail" placeholder="Введите email">
                    <div class="form-icon-wrapper">
                      <IconsMail class="form-icon" color="#B5BDDB" />
                    </div>
                    <div class="is-error-icon d-none">
                      <IconsMail class="form-icon" color="#fff" />
                    </div>
                  </div>
                  <div class="error-feedback-bordered d-none">
                    Неверная почта
                  </div>
                </div>
                <div class="form-group">
                  <label for="passwordInputForm" class="form-label">Пароль</label>
                  <div class="position-relative">
                    <input v-model="userStore.password" id="passwordInputForm" type="password" class="form-control" name="password" placeholder="Введите пароль">
                    <div class="form-icon-wrapper">
                      <IconsPassword class="form-icon" color="#B5BDDB" />
                    </div>
                    <div class="is-error-icon d-none">
                      <IconsPassword class="form-icon" color="#fff" />
                    </div>
                  </div>
                  <div class="error-feedback-bordered d-none">
                    Неверный пароль
                  </div>
                </div>
                <div class="d-grid mt-4">
                  <button :class="{'btn-disabled' : !userStore.username || !userStore.password}" type="submit" class="btn d-block">
                    Войти
                  </button>
                </div>
              </form>
              <ForgotPasswordLink class="forgotPasswordLink" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <ForgotPasswordModal />
</template>

<script setup>
import {useUserStore} from "~/stores/userStore";
const userStore = useUserStore()
const { status, data, signIn, signOut } = useSession()
</script>
<script>

export default {
  name: "index",
}
</script>

<style scoped>

</style>

**这是auth文件,何时需要执行逻辑。**我的路径是server/API/auth/[...].ts

// file: ~/server/api/auth/[...].ts
import { NuxtAuthHandler } from '#auth'
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";

export default NuxtAuthHandler({
    secret: 'your-secret-here',
    session: {
      strategy: 'jwt'
    },
    jwt: {
        // The maximum age of the NextAuth.js issued JWT in seconds.
        // Defaults to `session.maxAge`.
        maxAge: 60 * 60 * 24 * 30,
    },
    providers: [
        // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
        CredentialsProvider.default({
            // The name to display on the sign in form (e.g. 'Sign in with...')
            name: 'Credentials',
            // The credentials is used to generate a suitable form on the sign in page.
            // You can specify whatever fields you are expecting to be submitted.
            // e.g. domain, username, password, 2FA token, etc.
            // You can pass any HTML attribute to the <input> tag through the object.
            credentials: {
                username: { label: 'Username', type: 'text'},
                password: { label: 'Password', type: 'password'}
            },
            async authorize (credentials: any) {
                try {
                    // You need to provide your own logic here that takes the credentials
                    // submitted and returns either a object representing a user or value
                    // that is false/null if the credentials are invalid.
                    const usernameForm = credentials?.username
                    const passwordForm = credentials?.password
                    const config = {
                        url: 'https://api3.evrotrans.net/auth/login',
                        credentials: 'include',
                        method: 'post',
                        headers: {
                            "Content-type": "application/json; charset=UTF-8"
                        },
                        data: '{\"login\":\"' + usernameForm +'\",\"password\":\"' + passwordForm + '\"}',
                    }
                    await axios.request(config).then((response) => {
                        const user = {username: usernameForm, password: passwordForm, token: response.data.token}
                        console.log(response.data.message)
                        if (response.data.error == 0) {
                            // Any object returned will be saved in `user` property of the JWT
                            console.log('авторизован')
                            return true
                        }
                        if (response.data.password == 'Incorrect login or password.') {
                            console.error('неправильный логин или пароль')
                            return null
                        }
                    })
                }
                catch (e) {
                    console.log(e)
                    return e
                }
            }
        })
    ],
})
ohfgkhjo

ohfgkhjo1#

问题出在 axios 上。
我的解决方案是:

let response = await axios.post('https://api3.evrotrans.net/auth/login', {
                credentials: 'include',
                headers: {
                    "Content-type": "application/json; charset=UTF-8"
                },
                login: usernameForm,
                password: passwordForm
            })
            if (response.data.error == 0) {
                response.data.username = usernameForm
                const user = response.data
                console.log(user)
                return user
            }

相关问题