NUXTJSを用いたRALAVEL API認証( Sanctum ) (第2報)

最後の部分では、あなたがdidntをチェックするかどうかについて言及しました.
ここでNuxtと統合します.あなたがフロントエンドを示すJS
Nuxtインストール
ここでは、Nuxtをseperate standaloneフロントエンドとしてインストールしています.npm init nuxt-app laravel-api-auth-sanctum だからnpm init nuxt-app name of your projectオプションJavascript or Typescript
今のところJavaScriptで作業します.Package manager-npm or yarn
私たちはあなたが糸を使用できるNPMを使用しますUI framework
私はあなたのために行くことができるtailwindを選択しています.Nuxt.js Modules
あなたは私がAxiosLinting Tools
私はプリティに行くTesting Tools
現在用Rendering mode select SSR ServerHosting
ここでは、我々はnodejsホスティングを選択しますDevelopment Tools Continous Integration
もうないVersion COntrol System
ここでは何も選択しています.
プロジェクトの作成

注意してくださいこのプロジェクトで使用される設定は、必要に応じて調整する必要がある要件に基づいてクライアントの要件に基づいて使用することがあります.cd onto the project folder npm run devすべてをインストールしたら


あなたはこの
ページ/インデックス.VueはNuxtアプリケーションの出発点です.

localhostポート300に表示される結果を見ると、それはあなたにものを与えます

すべてのcompoanentsここで我々はNavbarNavbar.vue

  <div class=" flex justify-between items-center my-10">
    <nuxt-link to="/" class=" text-2xl font-semibold">
      Laranuxt Aut
    </nuxt-link>

    <!-- logo -->
    <nav class=" flex space-x-10">
      <nuxt-link
        class=" font-bold text-base uppercase"
        :to="{ name: 'auth-login' }"
        >Login</nuxt-link
      >
      <nuxt-link
        class=" font-bold text-base uppercase"
        :to="{ name: 'auth-register' }"
        >Register</nuxt-link
      >
    </nav>
  </div>
</template>

「ページ」フォルダで、デフォルトで作成するコンポーネントは、コンポーネントの名前がルートに表示されます.ここで、ページフォルダ内にAuthフォルダを作成し、内部のAuthフォルダを作成します.Vueと他のログアウトです.Vue

あなたが行くならばhttp://localhost:3000/auth/login ログインルートを見ることができますhttp://localhost:3000/auth/register ルートルートレジスタを見ることができます.
NuXtリンクと名前付きルート
ページディレクトリの下にコンポーネントを含めると自動的にルートになります.我々が含むならばfruits.vue ページフォルダの下に/fruits ディレクトリは、単に使用することができます<nuxt-link
class=" font-bold text-base uppercase"
to="/fruits"
>Home</nuxt-link
>名称
名前付きのルートを含めたいならば<nuxt-link
class=" font-bold text-base uppercase"
:to="{ name: 'fruits' }"
>Home</nuxt-link
>ページフォルダの下にファイル名を変更する場合は、ここで注意してくださいfruit.vue 動作しません.あなたが多くの場所で名前付きのルートを使用するならば、あなたがちょうどルートの関連を変える必要があるので、その問題.しかし、心配する必要はありません.Check .auth folderイン.Nuxtフォルダがルータです.js
自動的に生成される名前、パス、およびコンポーネントが表示されます

ここでルートは自動的にここであなたのルートをここに命名しなければなりません.その結果、コンポーネント名をページフォルダーで連続的に変更すると、名前付きルートにリンクする場合はNuxtリンクを変更する必要はありません.
Navbarの問題
ログインまたは登録ルートにリンクするとき、我々はNavbarを見ません.
プロジェクトルートディレクトリでlayouts フォルダと内部の作成layouts/default.vue Go to laydefault.vue

  <div class=" max-w-6xl mx-auto">
    <Navbar />

    <main class="my-20">
      <Nuxt />
    </main>
  </div>
</template>

Navリンク
今、我々が登録またはログインルートに行くとき、我々はNavbarを見ます

接続Lavavel APIとNuxtAt first install axios npm install @nuxtjs/axiosインnuxt.config.js
今ではmainpartRegister.vue

  <div class="container mx-auto sm:w-4/5 xl:w-1/4 border p-10 rounded-xl">
       <div class="text-center -mt-4">Register</div>

        <form action="" @submit.prevent="submitForm">
            <div class="md:w-1/2 space-y-3">
        <input type="email" v-model="form.email" class="px-6  border rounded-md" placeholder-gray-500 placeholder="Enter your email" /><br>
         <p class=" text-red-500 text-xs text-center" v-if="errors.email">
          {{ errors.email.join(" ") }}
        </p>
          <input type="text" v-model="form.username" class="px-6  border rounded-md" placeholder-gray-500 placeholder="Enter your username" /><br>
          <p class=" text-red-500 text-xs text-center" v-if="errors.username">
          {{ errors.username.join(" ") }}
        </p>
          <input type="password" v-model="form.password" class="px-6  border rounded-md" placeholder-gray-500 placeholder="Password" /><br>
          <p class=" text-red-500 text-xs text-center" v-if="errors.password">
          {{ errors.password.join(" ") }}
        </p>
          <input type="password" v-model="form.password_confirmation" class="px-6  border rounded-md" placeholder-gray-500 placeholder="Confirm your password" /><br>
          <p class=" text-red-500" v-if="errors.password_confirmation">
          {{ errors.password_confirmation.join(" ") }}
        </p>
          <button class="px-6  bg-green-300 text-white font-serif">SEND</button>
          </div>
        </form>
          <div class=""> Already have an account? <nuxt-link class="text-blue-600" :to="{name:'auth-login'}">Login</nuxt-link>
          </div>
      </div>

</template>

<script>
export default {
    data(){
        return{
            errors:{

            },
            form: {

        username: "",
        email: "",
        password: "",
        password_confirmation: ""
      }
        }

    },
    methods:{
       async submitForm(){
           this.errors='';
           try {
               const res= await this.$axios.$post("api/auth/register", this.form);
            //    console.log(res);
            console.log(res);
           } catch (error) {
               if(error.response.status===422){
                   this.errors = error?.response?.data?.errors;
               console.log(this.errors);

               }

           }


        }
    }

}
</script>

ここでは、あなたがわからないかもしれないVueまたは基礎を知らないならば、多くのものがあります.あなたは私を通して読むことができます.合計7ブログがあります.
ここでは、私たちはTarwindで作られた登録フォームを持っています、そして、我々はAxiosを通してHTTPリクエストを提出しています.その後、422エラーの場合には例外処理を行いますif(error.response.status===422){
this.errors = error?.response?.data?.errors;
console.log(this.errors);
}
In vue template In case of any errors of email,password or username we set it like this <p class="text-red-500 text-xs text-center" v-if="errors.email">
{{ errors.email.join(" ") }}
</p>
これはあなたが得るエラーです.一方ですべてが成功した場合

コンソールユーザーが正常に登録されていることがわかります.In Login.vue

<template>
  <div class="container mx-auto sm:w-4/5 xl:w-1/4 border p-10 rounded-xl">
       <div class="text-center -mt-4">Login</div>

      <div class="md:w-1/2 ">
             <form @submit.prevent="submitForm" action="" class="space-y-3">
        <input type="text" v-model="form.email"  class="px-6  border rounded-md" placeholder-gray-500 placeholder="Enter your email" /><br>

        <p class=" text-red-500 text-xs text-center" v-if="errors.email">
          {{ errors.email.join(" ") }}
        </p>
          <input type="password" v-model="form.password"  class="px-6  border rounded-md" placeholder-gray-500 placeholder="Enter your password" /><br>
          <p class=" text-red-500 text-xs text-center" v-if="errors.password">
          {{ errors.password.join(" ") }}
        </p>

          <button class="px-6 py-1 bg-yellow-300 text-white font-serif">SEND</button>
             </form>
          <div class="text-xs "> Not Registered? <nuxt-link class="text-blue-600" :to="{name:'auth-register'}">Register</nuxt-link></div>


  </div>
  </div>
</template>

<script>
// import swal from 'sweetalert2'
 export default {
   data(){
         return{
             errors:{

            },
            form: {


       email: "",
        password: "",
               }
        }

    },
    methods:{
       async submitForm() {
      this.errors = {};
      try {
         await this.$axios.$post("api/auth/login", this.form);
        });
        // this.$router.push({ name: "auth-login" });

      } catch (error) {
        if (error.response.status === 422) {
          this.errors = error?.response?.data?.errors;
          return;
        }
        // if (error.response.status === 401) {

      }
    }
  }
};
</script>

ここでは、すべてのバリデーションエラーを取得し、正しいusernaemとパスワードを入力するとトークンを取得します
)
ここでは、我々は我々がこれがMozillaブラウザからとられるトークンを得るのを見るネットワークタブで見ます
Nuxtでトークンを渡すNuxt Auth最良の方法
nuxt authのインストールnpm install --save-exact @nuxtjs/auth-nextにもnuxt.config.js
NuxtのAxiosの下にいくつかのAuth Starteigiesを書く必要があります.設定.js

これらを得るからnuxt-auth-docs . Remeberは、常に多くの情報を見つけるドキュメントを読む.Go back to Laravel project api.php
また、ユーザーのルートを含めるAuthController
ポストマンにおけるAuth／Userルートのテスト

トークンとすべてが正しいならば、我々は現在の認証されたユーザーの情報を得ます.

このために、バックエンドでユーザのadatをppropertyに作成する必要があります.Create UserResource in Laravel php artisan make:resource UserResource今私達が行くならAuthController
ユーザーメソッドを変更する必要があります
郵便配達人のテスト
すべてが正しいならば、我々はデータオブジェクトとしてすべてのユーザー情報を得ます

ログイン.Vue
私たちは、トークンを扱う最も簡単な方法から、AxiosをLoginwithで置き換える必要があります.

我々はすべてを正しく入力し、Vue
on Chrome ユーザーオブジェクトが表示されます

下記参照
In NavBar.vue 我々が現在認証されたユーザーのすべての詳細を見たいならば
If we check on the browser Showing logout while being authenticated In Navbar.vue ユーザーがloggedinでないならば
If User is LoggedIn While User is loggedIn in browser While User is logged out or not loggedin in browser
それで、私は今のところLaravel Nuxt Sanctum認証のためにそれを非常に推測します.