使用 NuxtJS 安裝和設置 Laravel 9 Sanctum 身份驗證

在本節中，我們將使用 Nuxt JS 安裝和設置 Laravel 9 sanctum 身份驗證。Nuxt JS 為服務器端渲染 (SSR) 或靜態站點生成 (SSG) 提供自動性能優化、路由、組件導入和選項。如果你曾經在 React 中使用過 Gatsby，那麼模塊類似於插件。

設置 Laravel 9 Sanctum 身份驗證

創建 laravel 項目

composer create-project Laravel/laravel laravel-backend  

設置你的 .env 文件

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

安裝 Laravel 微風

composer require laravel/breeze --dev

安裝 laravel 微風 api 命令來創建 Sanctum 身份驗證。

php artisan breeze:install api

安裝breeze api 後，你可以看到.env 文件有後端和前端的兩個url。您可以在生產中更改 url，本地保留它。

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

運行項目並離開它。

php artisan serve  

注意：打開兩個終端，一是運行 laravel 應用程序，二是創建 nuxtjs 項目並運行。

設置 Nuxt js Sanctum 身份驗證

創建 nuxt js 應用

使用 NPM：

npm init nuxt-app frontend

使用紗線：

yarn create nuxt-app frontend

然後選擇您的項目要求。

安裝 Nuxtjs 身份驗證

使用紗線：

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

使用 npm：

npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/axios

在nuxt.config.js中導入 Nuxt JS laravel Sanctum

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: '/login'
          }
        }
      },
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://localhost:8000',
    credentials: true
  },

  router: {
    middleware: ['auth']
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

接下來，您需要創建login.vue、register.vue和 layouts 文件夾添加default.vue文件。

使用 nuxt js 鏈接創建default.vue和 navbar，例如登錄、註冊和註銷。

默認視圖

<template>
  <div>
    <nav class="container flex justify-around py-8 mx-auto bg-white">
      <div>
        <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
      </div>
      <div class="flex space-x-8">
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/login" v-if="!$auth.loggedIn">Login</NuxtLink>
        <NuxtLink to="/register" v-if="!$auth.loggedIn">Register</NuxtLink>
        <div v-if="$auth.loggedIn">
          <button
            type="button"
            @click="logout"
          >
            Logout
          </button>
        </div>
      </div>
    </nav>
    <Nuxt />
  </div>
</template>
<script>
export default {
  middleware: "auth",
  methods: {
    async logout() {
      this.$nuxt.$loading.start();
      this.$auth.logout();
      this.$nuxt.$loading.finish();
      this.$router.push("/login");
    },
  },
};
</script>

頁面/register.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign Up
      </h1>

      <form class="mt-6" ref="registerform" @submit.prevent="register">
        <div>
          <label for="name" class="block text-sm text-gray-800">name</label>
          <input
            v-model="form.name"
            name="name"
            type="text"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password Confirmation</label
            >
            <input
              v-model="form.password_confirmation"
              name="password_confirmation"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  auth: "guest",
    data() {
    return {
      form: {
        name: null,
        email: null,
        password: null,
        password_confirmation: null
      },
      errors: []
    }
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    register() {
      try {
        this.$axios.post("/register", this.form).then((res) => {
          this.$auth.loginWith("laravelSanctum", { data: this.form });
          this.$router.push({
            path: "/",
          });
        });
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

頁面/login.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign In
      </h1>
      <form class="mt-6" @submit.prevent="login">
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Login
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  auth: "guest",
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
    };
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    async login() {
      this.$nuxt.$loading.start();
      try {
        await this.$auth.loginWith("laravelSanctum", { data: this.form });
        this.$router.push({
          path: "/",
        });
      } catch (err) {
        console.log(err);
      }
      this.$nuxt.$loading.finish();
    },
  },
};
</script>

頁面/index.vue

<template>
  <div>
    <div class="flex items-center justify-center h-screen">
      <div class="max-w-xl p-5 shadow">
        <div v-if="!$auth.loggedIn">
          <h3>Home</h3>
        </div>
        <div v-if="$auth.loggedIn">
          <div>Name:{{ $auth.user.name }}</div>
          <div>Name:{{ $auth.user.email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

運行服務器

npm run dev

來源：  https ://larainfo.com

#laravel #nuxtjs 

What is GEEK

Buddha Community

Laravel Sanctum vs Passport

✔ Laravel Passport or Sanctum
✔ What is OAuth2?
✔ How OAuth Works?

🔗 https://www.youtube.com/watch?v=LE1TC4WS4CY

#laravel #php #laravel-sanctum #laravel-passport #sanctum #laravel 7

使用 NuxtJS 安裝和設置 Laravel 9 Sanctum 身份驗證

在本節中，我們將使用 Nuxt JS 安裝和設置 Laravel 9 sanctum 身份驗證。Nuxt JS 為服務器端渲染 (SSR) 或靜態站點生成 (SSG) 提供自動性能優化、路由、組件導入和選項。如果你曾經在 React 中使用過 Gatsby，那麼模塊類似於插件。

設置 Laravel 9 Sanctum 身份驗證

創建 laravel 項目

composer create-project Laravel/laravel laravel-backend  

設置你的 .env 文件

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

安裝 Laravel 微風

composer require laravel/breeze --dev

安裝 laravel 微風 api 命令來創建 Sanctum 身份驗證。

php artisan breeze:install api

安裝breeze api 後，你可以看到.env 文件有後端和前端的兩個url。您可以在生產中更改 url，本地保留它。

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

運行項目並離開它。

php artisan serve  

注意：打開兩個終端，一是運行 laravel 應用程序，二是創建 nuxtjs 項目並運行。

設置 Nuxt js Sanctum 身份驗證

創建 nuxt js 應用

使用 NPM：

npm init nuxt-app frontend

使用紗線：

yarn create nuxt-app frontend

然後選擇您的項目要求。

安裝 Nuxtjs 身份驗證

使用紗線：

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

使用 npm：

npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/axios

在nuxt.config.js中導入 Nuxt JS laravel Sanctum

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  auth: {
    strategies: {
      laravelSanctum: {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: {
          login: {
            url: '/login'
          }
        }
      },
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://localhost:8000',
    credentials: true
  },

  router: {
    middleware: ['auth']
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

接下來，您需要創建login.vue、register.vue和 layouts 文件夾添加default.vue文件。

使用 nuxt js 鏈接創建default.vue和 navbar，例如登錄、註冊和註銷。

默認視圖

<template>
  <div>
    <nav class="container flex justify-around py-8 mx-auto bg-white">
      <div>
        <h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
      </div>
      <div class="flex space-x-8">
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/login" v-if="!$auth.loggedIn">Login</NuxtLink>
        <NuxtLink to="/register" v-if="!$auth.loggedIn">Register</NuxtLink>
        <div v-if="$auth.loggedIn">
          <button
            type="button"
            @click="logout"
          >
            Logout
          </button>
        </div>
      </div>
    </nav>
    <Nuxt />
  </div>
</template>
<script>
export default {
  middleware: "auth",
  methods: {
    async logout() {
      this.$nuxt.$loading.start();
      this.$auth.logout();
      this.$nuxt.$loading.finish();
      this.$router.push("/login");
    },
  },
};
</script>

頁面/register.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign Up
      </h1>

      <form class="mt-6" ref="registerform" @submit.prevent="register">
        <div>
          <label for="name" class="block text-sm text-gray-800">name</label>
          <input
            v-model="form.name"
            name="name"
            type="text"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password Confirmation</label
            >
            <input
              v-model="form.password_confirmation"
              name="password_confirmation"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  auth: "guest",
    data() {
    return {
      form: {
        name: null,
        email: null,
        password: null,
        password_confirmation: null
      },
      errors: []
    }
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    register() {
      try {
        this.$axios.post("/register", this.form).then((res) => {
          this.$auth.loginWith("laravelSanctum", { data: this.form });
          this.$router.push({
            path: "/",
          });
        });
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

頁面/login.vue

<template>
  <div
    class="relative flex flex-col justify-center min-h-screen overflow-hidden"
  >
    <div class="w-full p-6 m-auto bg-white rounded shadow-lg lg:max-w-md">
      <h1 class="text-3xl font-semibold text-center text-purple-700">
        Sign In
      </h1>
      <form class="mt-6" @submit.prevent="login">
        <div>
          <label for="email" class="block text-sm text-gray-800">Email</label>
          <input
            v-model="form.email"
            name="email"
            type="email"
            class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
          />
        </div>
        <div class="mt-4">
          <div>
            <label for="password" class="block text-sm text-gray-800"
              >Password</label
            >
            <input
              v-model="form.password"
              name="password"
              type="password"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
            />
          </div>
          <div class="mt-6">
            <button
              type="submit"
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600"
            >
              Login
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  auth: "guest",
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
    };
  },
  mounted() {
    this.$axios.$get("/sanctum/csrf-cookie");
  },
  methods: {
    async login() {
      this.$nuxt.$loading.start();
      try {
        await this.$auth.loginWith("laravelSanctum", { data: this.form });
        this.$router.push({
          path: "/",
        });
      } catch (err) {
        console.log(err);
      }
      this.$nuxt.$loading.finish();
    },
  },
};
</script>

頁面/index.vue

<template>
  <div>
    <div class="flex items-center justify-center h-screen">
      <div class="max-w-xl p-5 shadow">
        <div v-if="!$auth.loggedIn">
          <h3>Home</h3>
        </div>
        <div v-if="$auth.loggedIn">
          <div>Name:{{ $auth.user.name }}</div>
          <div>Name:{{ $auth.user.email }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

運行服務器

npm run dev

來源：  https ://larainfo.com

#laravel #nuxtjs 

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete

Laravel App Development Company in India, Hire Laravel Developers

Hire our expert team of Laravel app developers for flexible PHP applications across various cloud service providers.

With this easy build technology, we develop feature-rich apps that make your complex business process a lot easier. Our apps are,

• More secure and scalable.
• A good framework lets you manage and organize resources better.
• And have a rich community base.

Get your business a best in classlaravel app. Hire laravel app developers in India. We have the best organizational set-up to provide you the most advanced app development services.

#laravel app development company india #hire laravel developers india #laravel app development company #hire laravel developers #laravel development agency #laravel app programmers

Best Laravel Development Company

In the present world, PHP is a well-liked framework. Laravel is one of the most well-known frameworks out there. The popularity of Laravel is due to its expressiveness, flexibility, good controllers, strength, seamless caching, and time savings when handling tasks like routing, authentication, sessions, and many more.

Laravel is a PHP framework that everyone who knows PHP should be familiar with. The Laravel PHP framework is simple to learn and use, but it is packed with useful features. Despite rising market competition, many developers consider Laravel to be one of the best PHP frameworks available.

WPWeb Infotech is a top Laravel development company in India and the US since 2015. They develop reliable, scalable Laravel web and mobile apps using Ajax-enabled widgets, MVC patterns, and built-in tools. WPWeb Infotech has top-notch expertise in combining a variety of front- and back-end technologies like Laravel + VueJS, Laravel + Angular, and Laravel + ReactJS to create scalable and secure web architectures, so you don't have to worry about scalability and flexibility while developing your product. They understand business scale and recommend technology that fits. Agile experts reduce web and mobile app development time and risk.

When it comes to hiring Laravel developers from India, they are the best choice because their Laravel developers can work according to your time zone to provide you with hassle-free, innovative, and straightforward web development solutions. Being the most trusted Laravel development company in India, they can help you reach new heights of success, unleashing the power of the Laravel PHP framework.

Partner with one of India’s best Laravel Development Company and get the most expertise in Laravel development.

#laravel  #laravel-development #laravel-development-company #laravel-development-services #hire-laravel-developers