上個(gè)星期，甲方說(shuō)要在應(yīng)用上做一個(gè)促活活動(dòng)（其實(shí)就是讓用戶(hù)領(lǐng)OFO的騎車(chē)券），考慮到之前在我另一個(gè)應(yīng)用上已經(jīng)做過(guò)客戶(hù)端token驗(yàn)證，想想，擼起袖子直接在之前的Node上開(kāi)搞吧。

Nuxt

這個(gè)東西類(lèi)似與React中的Next，做Vue服務(wù)端渲染在Nuxt確實(shí)挺方便的，整個(gè)目錄結(jié)構(gòu)與Vue-Cli也差不多，但我覺(jué)得更清晰明了，而且有很豐富的配置，包括我最喜歡的頂部Loadding條啊、Layer主題模板啊、服務(wù)端渲染有益于SEO啊、自動(dòng)生成Router啊等等等等。這里我就不詳細(xì)展開(kāi)了，選擇他主要是用習(xí)慣了，而且性能也很不錯(cuò)。

Express

它就是一個(gè)Koa、egg等的一個(gè)服務(wù)端的工具，封裝很多便捷的方法。這里也不詳細(xì)展開(kāi)。

第一步 完成靜態(tài)頁(yè)面

在這里就不詳細(xì)說(shuō)明HTML怎么構(gòu)建、Vue使用方法等等等不相關(guān)的問(wèn)題，首先頁(yè)面效果如下圖：

點(diǎn)擊確認(rèn)領(lǐng)取后，向后端發(fā)送請(qǐng)求，獲取券碼：

大致業(yè)務(wù)流程就是這樣子了。

第二步 基于webview完成token驗(yàn)證

甲方公司的token是怎么給到用戶(hù)的呢？

1.  用戶(hù)登錄客服端
2. 戶(hù)在webview訪問(wèn)相應(yīng)的地址
3. 客戶(hù)端把token等信息綁定在地址上讓服務(wù)端接受，并向服務(wù)端發(fā)送GET請(qǐng)求
4. 服務(wù)端接受到Token后，根據(jù)Token信息驗(yàn)證用戶(hù)身份并返回頁(yè)面給用戶(hù)

所以也就是相當(dāng)于，此時(shí)我手上的Node需要完成一個(gè)Token驗(yàn)證的需求，開(kāi)搞：

這里必須說(shuō)一下Session這個(gè)東西，一開(kāi)始當(dāng)我完成了Token驗(yàn)證的時(shí)候，可是發(fā)現(xiàn)兩個(gè)用戶(hù)同時(shí)訪問(wèn)的時(shí)候，后訪問(wèn)者會(huì)重新執(zhí)行一次對(duì)應(yīng)請(qǐng)求里的方法，相當(dāng)于很多數(shù)據(jù)都初始化甚至重新賦值。完全不知道怎么把用戶(hù)分開(kāi)，問(wèn)了一下JAVA的同學(xué)，他們說(shuō)框架自帶會(huì)分開(kāi)，這就讓我很憂(yōu)郁了。其實(shí)，他們也知道Session這個(gè)東西，只是一直這樣用后習(xí)慣了也就突然說(shuō)不清楚甚至想到它的存在了。

我一開(kāi)始想到的是用Cookie驗(yàn)證對(duì)應(yīng)瀏覽器，但總覺(jué)得這種方法有點(diǎn)古老，不夠高大上（個(gè)人主觀看法，勿噴），儲(chǔ)存量也很有限。所以又探索了一天，得知有個(gè)Session這個(gè)東西可以驗(yàn)證對(duì)應(yīng)瀏覽器（好吧，其實(shí)也就是把Cookie當(dāng)成數(shù)據(jù)索引）。知道了有這么一回事之后也就茅塞頓開(kāi)了。

// 引入一些工具
const http = require('http')
const express = require("express");
const session = require('express-session');

const nuxtapp = express(); // 創(chuàng)建一個(gè)express應(yīng)用

// 設(shè)置SESSION配置
nuxtapp.use(session({
 secret: 'key' // 建議使用 128 個(gè)字符的隨機(jī)字符串 
}));

// 處理OPTIONS請(qǐng)求（axios發(fā)送POST請(qǐng)求時(shí)會(huì)先發(fā)送一個(gè)OPTION請(qǐng)求驗(yàn)證服務(wù)器的連通情況）
nuxtapp.use(function (req, res, next) {
 if ('OPTIONS' === req.method) {
  res.sendStatus(200);
 } else {
  next();
 }
});

// 寫(xiě)一個(gè)驗(yàn)證Token的接口
nuxtapp.get('/getphone', (req, res) => {
  if (!req.query.token) {
   // if else ...
   res.sendStatus(200)
   return;
  }
  // 這里創(chuàng)建請(qǐng)求只是舉一個(gè)例子，有的Token可以本地解析，有的需要服務(wù)端向另一個(gè)服務(wù)端請(qǐng)求解析。（參考微信）
  const request = http.request({
   host: "api.example.com",
   headers: {
    'Content-Type': ' application/json',
    'Accept-Encoding': 'utf-8', //這里設(shè)置返回的編碼方式 設(shè)置其他的會(huì)是亂碼
    'Accept-Language': 'zh-CN,zh;q=0.8',
    'Connection': 'keep-alive',
   },
   path: '/getTokenorSth',
   port: 'port',
   method: 'POST'
  }, response => {
   let data = ""; // 創(chuàng)建變量記錄數(shù)據(jù)
   response.on("data", function (chunk) {
    data += chunk
   })
   response.on("end", function () { // 設(shè)置seesion
    try {
     if (!req.session.id) {
      // set session like : req.session.id= JSON.parse(data)
     }
     res.sendStatus(200)
    } catch (err) {
     console.log(err);
     res.sendStatus(500)
    }
   })
  }).on('error', (e) => {
   console.log(`錯(cuò)誤信息: ${e.message}`);
   res.sendStatus(500)
  });
  // POST Data
  request.write(JSON.stringify({
    example:example,
    token: req.query.token
  })); // 用戶(hù)傳過(guò)來(lái)的數(shù)據(jù) post
  request.end();
})

nuxtapp.listen(port || 80, '0.0.0.0')
console.log("已開(kāi)啟服務(wù)器，請(qǐng)?jiān)L問(wèn) —— localhost:" + port || 80)

第三步 服務(wù)端代理（這里我也有個(gè)點(diǎn)不是很確定，所謂淘寶Node+JAVA是不是就是這種模式）

畢竟我還是個(gè)前端，功能方面的實(shí)現(xiàn)還是交給資深大JAVA吧（若是給我時(shí)間，我還真的想寫(xiě)一下SQL復(fù)習(xí)一下）

用戶(hù)訪問(wèn)的時(shí)候還是向Node請(qǐng)求，這里需要提一點(diǎn)的就是，假如后端提供了很多接口，你不一定每個(gè)都要寫(xiě)一個(gè)app.get(‘/api')或者什么，express的文檔上有提到類(lèi)似這種寫(xiě)法：

nuxtapp.all(["/api1/*","/api2/*"], requestFunction)

其他就跟上面token驗(yàn)證差不多了

第四步 用Express執(zhí)行Nuxt

在Nuxt官網(wǎng)上其實(shí)也有部分代碼教你如何用自己寫(xiě)的Node去運(yùn)行，但一直不是很完善，有點(diǎn)差強(qiáng)人意。我在這里就補(bǔ)充一下我的理解， 哪里寫(xiě)得不對(duì)，請(qǐng)盡管?chē)?，謝謝噴我的每一個(gè)人 。

// nuxt
const {
 Nuxt,
 Builder
} = require('nuxt') // 引入核心構(gòu)建屬性

// 判斷開(kāi)發(fā)環(huán)境
const isProd = (process.env.NODE_ENV === 'production')
const port = process.env.PORT || 80

// 引入nuxt配置
const config = require('./nuxt.config.js')
config.dev = !isProd;
const nuxt = new Nuxt(config);

// 判斷生產(chǎn)模式 dev(開(kāi)發(fā)者模式)表示重新構(gòu)建 ；pro(生產(chǎn)模式)表示直接從yanr build的文件直接執(zhí)行
if (config.dev) {
 new Builder(nuxt).build()
  .then(listen)
  .catch((error) => {
   console.error(error)
   process.exit(1)
  })
} else {
 listen()
}

以上的listen就是我在第二、三步寫(xiě)的相應(yīng)接口的express服務(wù)器啦。

那么nuxt其實(shí)還并沒(méi)有在代碼中執(zhí)行，new Nuxt一個(gè)Nuxt實(shí)例后返回一個(gè)nuxt方法，它其實(shí)是根據(jù)request,response去執(zhí)行相應(yīng)的渲染，其中我們要考慮到express()的各種接口的執(zhí)行順序，假如一開(kāi)始就匹配到了第二步的代碼的get請(qǐng)求，那么寫(xiě)在第二步代碼后的all方法中的各種接口是接收不到的。

我考慮到的是接口不是無(wú)緣無(wú)故執(zhí)行的，但用戶(hù)請(qǐng)求是必然發(fā)生的。那么也就是當(dāng)用戶(hù)除了故意發(fā)送請(qǐng)求，全部由Nuxt接手。所以Nuxt會(huì)是放在最后讓其渲染頁(yè)面并交給用戶(hù)，為了方便驗(yàn)證Token，我把驗(yàn)證Token的請(qǐng)求放在首頁(yè)讓瀏覽器捕獲Token以及相應(yīng)信息后交給Node執(zhí)行手動(dòng)登陸。（其實(shí)也可以通過(guò)在nuxt渲染前判斷是否存在Token來(lái)決定是否進(jìn)行token驗(yàn)證，我就不在這里再進(jìn)行大量代碼的展示了）

結(jié)合以上思路，也就是在最后捕獲所有GET請(qǐng)求并交手給Nuxt即可：

// 最后捕獲nuxt渲染
nuxtapp.get('/*', (req, res) => {
 nuxt.render(req, res)
})

Demo：jasontan.cn

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論