nuxt.js 全局 js_在Nuxt.js应用中实现身份验证

nuxt.js 全局 js

In this tutorial, I’ll be showing you to implement authentication in Nuxt.js app using the Auth module. For the purpose of this tutorial we’ll be using JWT for authentication.

在本教程中，我将向您展示如何使用Auth模块在Nuxt.js应用中实现身份验证。 就本教程而言，我们将使用JWT进行身份验证。

我们将要建设的 ( What we’ll be building )

Below is a quick demo of what we’ll be building in this tutorial.

以下是我们将在本教程中构建的快速演示。

启动快速API ( Spinning up a quick API )

To save ourselves some time, we’ll clone an API, which I have put together for this tutorial:

为了节省时间，我们将克隆一个API，该API已在本教程中整合在一起：

$git clone https://github.com/ammezie/jwt-auth-api.git

Then we install the API dependencies:

然后，我们安装API依赖项：

$cd jwt-auth-api
$ npm install

Next, rename .env.example to .env and generate an APP_KEY:

接下来，将.env.example重命名为.env并生成一个APP_KEY ：

// with the adonis CLI
$ adonis key:generate

// without the adonis CLI
$ node ace key:generate

Once that’s done, let’s run the migrations:

完成后，让我们运行迁移：

// with the adonis CLI
$ adonis migration:run

// without the adonis CLI
$ node ace migration:run

Before we move on to building the Nuxt.js app, let’s quickly go over the API. The API is built using AdonisJs and it uses JWT (JSON Web Tokens) for authentication. It also uses SQLite.

在继续构建Nuxt.js应用之前，让我们快速浏览一下API。 该API使用AdonisJs构建 ，并且使用JWT（JSON Web令牌）进行身份验证。 它还使用SQLite。

The API has three endpoints:

该API具有三个端点：

• /register: endpoint for users registration.
  /register ：用户注册的端点。
• /login: endpoint for authenticating users.
  /login ：用于验证用户的端点。
• /me: endpoint for getting details for the currently authenticated user and it is protected by an auth middleware, which means a user must be authenticated to access the endpoint.
  /me ：端点，用于获取当前已认证用户的详细信息，并且受auth中间件保护，这意味着必须对用户进行认证才能访问该端点。

The API also already has CORS enabled.

该API也已经启用了CORS。

Now, we can start the API:

现在，我们可以启动API：

$npm start

We should be able to access the API on http://127.0.0.1:3333/api. We’ll leave it running.

我们应该能够访问http://127.0.0.1:3333/api上的API。 我们让它继续运行。

Note: Though I’ll be using an API built with AdonisJs for the purpose of this tutorial, you are free to use whatever framework that work best for you.

注意：尽管本教程将使用AdonisJs构建的API，但是您可以自由使用最适合您的任何框架。

创建一个Nuxt.js应用 ( Creating a Nuxt.js app )

For this, we’ll make use of the Vue CLI, so you need to first install the Vue CLI in case you don’t have it installed already:

为此，我们将使用Vue CLI，因此，如果尚未安装Vue CLI，则需要先安装它：

$npm install -g vue-cli

Then we can create a Nuxt.js app:

然后，我们可以创建一个Nuxt.js应用程序：

$ vue init nuxt/starter nuxt-auth

Next, we need to install the dependencies:

接下来，我们需要安装依赖项：

$cd nuxt-auth
$ npm install

We can launch the app:

我们可以启动该应用程序：

$npm run dev

The app should be running on http://localhost:3000.

该应用程序应在http://localhost:3000 。

安装必要的Nuxt.js模块 ( Installing necessary Nuxt.js modules )

Now, let’s install the Nuxt.js modules that we’ll be needing for our app. We’ll be using the Nuxt Auth module and the Nuxt Axios module, since auth module makes use of Axios internally:

现在，让我们安装应用程序所需的Nuxt.js模块。 我们将使用Nuxt Auth模块和Nuxt Axios模块 ，因为auth模块在内部使用Axios：

$npm install @nuxtjs/auth @nuxtjs/axios --save

Once that’s done, add the code below to nuxt.config.js:

完成后，将以下代码添加到nuxt.config.js ：

// nuxt.config.js

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth'
],

Next, we need to set up the modules. Paste the code below into nuxt.config.js

接下来，我们需要设置模块。 将下面的代码粘贴到nuxt.config.js

// nuxt.config.js

axios: {
    
  baseURL: 'http://127.0.0.1:3333/api'
},

auth: {
    
  strategies: {
    
    local: {
    
      endpoints: {
    
        login: {
     url: 'login', method: 'post', propertyName: 'data.token' },
        user: {
     url: 'me', method: 'get', propertyName: 'data' },
        logout: false
      }
    }
  }
}

Here, we set the base URL (which is that of our API from earlier on) that Axios will use when making requests. Then we define the authentication endpoints for the local strategy corresponding to those on our API. On successful authentication, the token will be available in the response as a token object inside a data object, hence why we set propertyName to data.token. Similarly, the response from the /me endpoint will be inside a data object. Lastly, we set logout to false since our API doesn’t have an endpoint for logout. We’ll just remove the token from localstorage when a user logs out.

在这里，我们设置了Axios在发出请求时将使用的基本URL（这是我们之前的API的URL）。 然后，我们为local策略定义与API上相应的身份验证终结点。 成功认证后，令牌将作为data对象内的token对象在响应中可用，因此为什么我们将propertyName设置为data.token 。 同样， /me端点的响应将在data对象内部。 最后，由于我们的API没有用于注销的端点，因此我们将logout设置为false 。 当用户注销时，我们将从本地存储中删除令牌。

创建导航栏组件 ( Creating a Navbar component )

To style our app, we’ll be making use of Bulma. Open nuxt.config.js and paste the code below within the link object that is inside the head object:

要设计我们的应用程序样式，我们将使用Bulma 。 打开nuxt.config.js并将以下代码粘贴到head对象内部的link对象内：

// nuxt.config.js

{
    
    rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css' 
}

Now, let’s create the Navbar component. Rename AppLogo.vue inside the components directory to Navbar.vue and replace it content with the following:

现在，让我们创建Navbar组件。 将components目录内的AppLogo.vue重命名为Navbar.vue并将其内容替换为以下内容：

// components/Navbar.vue

<template>
  <nav class="navbar is-light">
    <div class="container">
      <div class="navbar-brand">
        <nuxt-link class="navbar-item" to="/">Nuxt Auth</nuxt-link>
        <button class="button navbar-burger">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">
              My Account
            </a>