token （后端生产） 用于：商品详情页：点击加入购物车，判断是否登录，没有登录跳转到 登录页

思路：

jsonwebtoken：www.npmjs.com/package/jso…

1. 进入后端服务 执行安装： npm install jsonwebtoken

在新增用户封装的sql语句下面做以下操作：

2. 引入 let jwt = require('jsonwebtoken');

3. 生成token：jwt.sign(用户信息，口令，过期时间)

4. 解析token jwt.decode(token)

一：前端部分 要做如下3点 ：其中第二点封装axios的时候，是把token状态保存到vuex中

    一： userQuery.js  token相关部分
    
    // 插入手机号和密码
    insertTel(option) {
    let tel = option.tel || "新增手机号"
    let pwd = option.pwd || "999999"
    
    // token相关
    let jwt = require('jsonwebtoken'); //   引入 token 包
    let payload = {
        tel: tel
    } // 用户信息
    let secret = "mixuebingcheng"; // 口令
    let token = jwt.sign(payload, secret) // 生成token： 
    return `insert into user (tel,pwd,imgUrl,name,token) values ("${tel}","${pwd}","../images/lvcha.jpeg","${tel}","${token}")`
    }
    
    二 request.js  axios 二次封装：第二部分
    
    import axios from 'axios';
    import {Indicator} from 'mint-ui';
    import store from "@/store/index.js"
    import router from "@/router/index.js"
    export default {
        common: {
            method: 'GET',
            data: {},
            params: {},
            headers: {}
        },
        $axios(ocptions = {}) {
            ocptions.method = ocptions.method || this.common.method;
            ocptions.data = ocptions.data || this.common.data;
            ocptions.params = ocptions.params || this.common.params
            ocptions.headers = ocptions.headers || this.common.headers

            // 请求获取数据前,开启loading状态
            Indicator.open('Loading...');

            // 二 通过token 判断用户登录状态 
            // 1.判断前端的请求是否有headers对象里是否有token，如果有就想token值赋值给vuex 的state的token，记得先引入vuex的store的index
            if (ocptions.headers.token) {
                ocptions.headers.token = store.state.users.token // 注意赋值的路径不要错了
                if (!ocptions.headers.token) {
                    // 如果没有 token 就跳转到登录页 要把router引入
                    router.push('/login')
                }
            }

            return axios(ocptions).then(v => {
                let data = v.data.data
                return new Promise((res, rej) => {
                    if (!v) return rej();
                    // 关闭loading
                    setTimeout(() => {
                        Indicator.close();
                    }, 300);
                    res(data)
                });

            })
        }
    }
    
   三：前端发送请求：点击加入购物 Footer.vue
   
    methods: {
    addCard() {
      let id = this.$route.query.id;
      // console.log(id, "123456");
      // 发送请求;
      http
        .$axios({
          method: "POST",
          url: "api/addCard",
          data: { id },
          // 前端发请求带上 headers，参数为token ，就是因为这个，所以请求axios要进行二次封装
          headers: {
            token: true,
          },
        })
        .then((res) => {
          console.log(res);
        });
    },
   },
   

二 后端服务，接口，解析token

 // 点击加入购物车按钮，接口 /api/addCard
router.post('/api/addCard', function (req, res, next) {
  // 前端传递过来的token，获取的方式注意一下 req.headers.token
  let token = req.headers.token
  console.log(token);
  // 解析token
  let tel = jwt.decode(token)
  console.log(tel);
  res.send({
    code: 200,
    data: {
      a: 1
    }
  })
})