Vue和Node.js交互之token

博主最近工作的時候，公司后台使用的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')
   }
  

未完待續···