Vue和Node.js交互之token

• 2021 年 4 月 25 日
• 笔记
• Node.js, VUE

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

• 给Axios的请求头加上token后，跨域（前端）
  • 给Vue设置代理

    config > index.js > proxyTable
    proxyTable: {
     '/api': {
       // 需要代理的url
       target: '//127.0.0.1:3000',
       changeOrigin: true,
       pathRewrite: {
         '^/api': '/'
       }
     }
    记得config文件夹中的文件修改需要重启项目
    

未完待续···