andyyu0920
andyyu0920

Vue 實作簡易驗證機制 App

為了顯示出 Vue.js 強大的能力 ，本文將會逐步指導建置一個簡單的前端應用程式。搭配 Node 所建置的後端程式範例。前後端兩個程式是完全分離的，後端使用 RESTful API 的方式負責取得資料與驗證。本文旨在說明如何替 Vue.js 程式加上驗證機制，過程中我們會使用 vue-router, vue-resource 實作 Login 與 Signup 元件展示如何檢索和儲存使用者的 jwt token，最後執行驗證機制取得那些需要授權的資料。

安裝與設定

首先從組織前端程式開始，讓我們先來建立專案：

$ mkdir auth-front-app
$ cd auth-front-app
$ npm init --yes

安裝我們所需要的 npm 套件，我們會在這個專案使用 Babel, Webpack 負責建置工具的部份：

$ npm i babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime css-loader style-loader vue-hot-reload-api vue-html-loader vue-style-loader vue-loader webpack webpack-dev-server -D

$ npm i bootstrap vue-resource vue-router vue -S

package.json 如下：

{
  "name": "auth-front-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.1",
    "vue-hot-reload-api": "^1.3.3",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.3",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "vue": "^1.0.25",
    "vue-resource": "^0.8.0",
    "vue-router": "^0.7.13"
  }
}

安裝完套件之後就是專案目錄下新增 webpack.config.js 設定檔：

var path = require('path')

module.exports = {
  entry: ['./src/index.js', './src/auth/index.js'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      }
    ]
  },
  /**
   * option: 您可以選擇把下面這段設定置於 .babelrc
   */
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  }
}

設定檔中首要的就是我們程式的進入點，我們設定了 src/index.js 和 src/auth/index.js 這兩支程式，最後會被輸出成 bundle.js。到這一步先別擔心我們還沒完成任何程式，習慣上小弟我會先構想整個專案架構，透過組織 webpack.config 可以讓我們先好好思考一下。

因為我們想使用 vue 元件 的方式組織程式碼。於是設定了負責處理 .vue 的部分，即 vue-loader 協助編譯。
到此便是我們目前所需的設定，最後我們只要透過 webpack-dev-server --inline --hot 就可觀察開發的前端程式。

Module not found: Error: Cannot resolve 因為到目前為止我們只是預先規劃兩隻進入點的程式還沒實作，所以執行 webpack-dev-server 會產生錯誤。

設定後端程式

因為本篇文章主要是要討論關於 Vue.js 處理驗證機制的作法，所以我們在後端部分採用 nodejs-jwt-authentication-sample。使用概略如下：

# 記得切換到另外的目錄
$ git clone [email protected]:auth0-blog/nodejs-jwt-authentication-sample.git
$ cd nodejs-jwt-authentication-sample
$ npm install

# 啟動後端程式
$ PORT=3001 node server.js

# 建立使用者 POST /users
# 注意：username 和 password 必須替換
$ curl -d "username=[replace_me]&password=[replace_me]" http://localhost:3001/users
# 建立成功應會回傳 { "id_token": "..." }

# 登入 POST /sessions/create
$ curl -d "username=[replace_me]&password=[replace_me]" http://localhost:3001/sessions/create
# 登入成功應會回傳 { "id_token": "..." }

# 不需授權 API: http://localhost:3001/api/random-quote
# 受保護 API: http://localhost:3001/api/protected/random-quote

注意這個後端範例的帳號資料會放在記憶體中，重啟就會消失。

配置 Vue 元件

現在可以來替我們的應用程式建置元件。在專案配置一節我們安裝與使用了 vue-loader 然後提到它讓我們可以使用 .vue 的方式來撰寫元件。具體來說就是我們在一隻 [component_name].vue 的檔案中分別撰寫