目錄

1. 用戶登陸,發(fā)送手機(jī)號(hào)碼和驗(yàn)證碼
2. 后臺(tái)接收參數(shù),查找用戶,用戶存在就生成token,返回給前端
3. 前端登陸成功,把token存到vuex(做持久化)
4. 使用axios攔截器,讀取vuex中的token,并放入請(qǐng)求頭
5. 請(qǐng)求其他接口,就會(huì)帶上token
6. 后臺(tái)在需要登陸的接口上,獲取token,解密token獲得userId,返回前端需要的數(shù)據(jù)
7. 用戶在下次使用app,如果token還在有效期內(nèi),不需要重新登陸

(一) 用戶登陸,發(fā)送手機(jī)號(hào)碼和驗(yàn)證碼

    async login() {
      // 發(fā)送請(qǐng)求,用post方式
      let url = "/login";
      // 請(qǐng)求參數(shù)
      let data = {
        phone: this.phone,
        smsCode: this.smsCode
      };
      let res = await this.$axios.post(url, data);
      console.log('res',res);
    }

(二) 后臺(tái)接收參數(shù),查找用戶,用戶存在就生成token,返回給前端

  // 獲取前端傳過來的參數(shù)phone,smsCode
    let {
        phone,
        smsCode
    } = ctx.params;
    // 查找用戶
    let result = findUser(phone, smsCode);
    // 找不到
    if (!result) {
        ctx.body = {
            code: 604,
            msg: '用戶名或密碼錯(cuò)誤'
        }
    } else {
        // 把userId和其它相關(guān)信息加密成一個(gè)token,返回給前端
        let userInfo = {
            userId: result.userId,
            phone: result.phone
        }
        // 生成token
        let token = jwt.sign(userInfo, "web03-server", {
            // expiresIn: "1000h"
            expiresIn: "10s"
        });

        ctx.body = {
            code: 666,
            msg: '登陸成功',
            user: {
                phone,
                token
            }
        }
    }

(三) 前端登陸成功,把token存到vuex(做持久化)

 login() {
      // 發(fā)送請(qǐng)求,用post方式
      let url = "/login";
      // 請(qǐng)求參數(shù)
      let data = {
        phone: this.phone,
        smsCode: this.smsCode
      };
      this.$axios.post(url, data).then(res => {
        // 修改登陸狀態(tài)
        this.$store.commit("updateLogin", true);
        // 把token存入store
        this.$store.commit("updateToken", res.user.token);
        // 把用戶名存入store
        this.$store.commit("updateUsername", res.user.phone);
        this.$router.push("/my");
      }).catch(err=> {
        console.log('登陸失敗')
      });
    }

(四) 使用axios攔截器,讀取vuex中的token,并放入請(qǐng)求頭

// request攔截器,在請(qǐng)求之前做一些處理
service.interceptors.request.use(
    config => {
        console.log('config',config);
        // 從vuex讀取token的值,給請(qǐng)求頭添加laohu-token
        if (store.state.token) {
            config.headers['laohu-token'] = store.state.token;
        }
        return config
    },
    error => {
        console.log(error) // for debug
        Promise.reject(error)
    }
)

(五) 請(qǐng)求其他接口,就會(huì)帶上token

image.png

(六) 后臺(tái)在需要登陸的接口上,獲取token,解密token獲得userId,返回前端需要的數(shù)據(jù)

const jwt = require("jsonwebtoken");
const util = require("util");
const verify = util.promisify(jwt.verify);
module.exports = async ctx=> {
    // 檢查token
    const token = "Bearer " + ctx.header["laohu-token"];
    // 解密token
    try {
        let payload = await verify(token.split(" ")[1], "web03-server");
        console.log('token信息', payload);
        let userId = payload.userId;
        // 根據(jù)userId去數(shù)據(jù)庫查詢購物車的列表
        ctx.body = {
            code: 666,
            msg: 'success',
            list: [
                {
                    name: '青軸鍵盤',
                    price: 300
                },
                {
                    name: '茶軸鍵盤',
                    price: 400
                },
                {
                    name: '紅軸鍵盤',
                    price: 600
                },
            ]
        }
    } catch (error) {
        console.log('error',error);
        ctx.body = {
            code: 603,
            msg: 'token不存在或者已失效'
        }
    }
}

(七) ps: 因?yàn)槲覀儗?duì)vuex做了持久化,用戶在下次使用app,發(fā)送請(qǐng)求也會(huì)帶上token,如果token還在有效期內(nèi),不需要重新登陸