博主最近工作的時候，公司後臺使用的JAVA，在做登陸時總會傳來一個token然後我存在了本地儲存中或Vuex中，之後每一次請求把它帶在請求頭上，然後就好奇想要自己做一個後臺伺服器然後做一個完整的登陸的邏輯。
後臺的搭建
對於一個前端開發人員，當然會選擇更容易上手的Node.js的express搭建
遇到的問題
- 如何搭建一個本地伺服器
- 首先需要先下載好Node.js 然後在終端中輸入
node --version檢視Node是否已經安裝好
- 如何使用express
- 下載express框架
- 在終端中輸入
npm install express --save下載- 使用express框架搭建本地伺服器
- 在建立的js檔案頂部引入express框架(
var express = require('express'))- 建立本地伺服器（
var app = express()）- 設定埠號
app.listen(3000, () => { console.log('http://localhost:3000') })- 新增一個登陸的介面
app.get('/login', (req, res) => {})
形參列表中的req是請求物件，res是響應物件，req具有一些屬性來儲存請求中的一些資料，而res是當一個HTTP請求到來時，Express程式返回的HTTP響應- 這樣一個簡易的本地伺服器就搭建完成了
- 使用json檔案模擬資料並且讀取
- 建立一個json檔案（
/json/login.json）{ "count":3, "userArray": [{"name":"qiqi","pwd":123456}] }- 引入fs模組（
const fs = require('fs')）fs.readFile('./json/test.json', 'utf8', (err, data) => { if (err) { console.error(err) return } console.log(data) })
- 將讀取檔案的步驟放到介面中並且使用
res.end(data)替換console.log(data)使得訪問該介面有響應資料。
- 跨域（後端）
- 在主檔案中新增
app.all("*", function (req, res, next) { //設定允許跨域的域名，*代表允許任意域名跨域 res.header("Access-Control-Allow-Origin", "*"); //允許的header型別 res.header("Access-Control-Allow-Headers", "content-type"); //跨域允許的請求方式 res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS"); if (req.method.toLowerCase() == 'options') { res.send(200); //讓options嘗試請求快速結束 } else { next(); } })
- 設定token
- 使用jsonwebtoken外掛簡單生成token
- 下載jwt（
npm install jsonwebtoken）- 引入jwt（
const jwt = require('token)- 使用jwt(建立生成和驗證token的方法)
// 生成token const generateToken = (data) => { const secret = '這是一段祕鑰，用於驗證token時使用' const token = jsonwebtoken.sign( data, secret, { expiresIn: 60 * 60 * 24 * 3 }) if (token) { return token; } else { return 'err' } } // 驗證token const verifyToken = (data) => { let result = {} if (data) { const secret = '這是一段祕鑰，用於驗證token時使用' jsonwebtoken.verify(data, secret, (err, decoded) => { if (err) { result = str; } else { result = decoded } }) return result } else { return 'error' } }
- 將token加到請求頭上
// 在跨域請求時，會攜帶使用者憑證 Axios.defaults.withCredentials = true Axios.defaults.headers.common['token'] = window.localStorage.getItem('token') ? > > window.localStorage.getItem('token') : false || mapState(['token'])[0]
- 給Axios的請求頭加上token後，跨域（前端）
- 給Vue設定代理
config > index.js > proxyTable proxyTable: { '/api': { // 需要代理的url target: 'http://127.0.0.1:3000', changeOrigin: true, pathRewrite: { '^/api': '/' } } 記得config資料夾中的檔案修改需要重啟專案
- 頁面重新整理 Vuex資料消失
- 設定在頁面重新整理或者關閉前將Vuex中的store儲存在本地儲存裡面
window.addEventListener('beforeunload', () => { this.$ls.setItem('store', JSON.stringify(this.$store.state)) })
- 下一次進入頁面活著重新整理完將本地儲存stroe重新賦值到Vuex上
if (this.$ls.getItem('store')) { this.$store.replaceState( Object.assign( {}, this.$store.state, JSON.parse(this.$ls.getItem('store')) ) ) this.$ls.removeItem('store') }