目录

1. 用户登陆,发送手机号码和验证码
2. 后台接收参数,查找用户,用户存在就生成token,返回给前端
3. 前端登陆成功,把token存到vuex(做持久化)
4. 使用axios拦截器,读取vuex中的token,并放入请求头
5. 请求其他接口,就会带上token
6. 后台在需要登陆的接口上,获取token,解密token获得userId,返回前端需要的数据
7. 用户在下次使用app,如果token还在有效期内,不需要重新登陆

(一) 用户登陆,发送手机号码和验证码

    async login() {
      // 发送请求,用post方式
      let url = "/login";
      // 请求参数
      let data = {
        phone: this.phone,
        smsCode: this.smsCode
      };
      let res = await this.$axios.post(url, data);
      console.log('res',res);
    }

(二) 后台接收参数,查找用户,用户存在就生成token,返回给前端

  // 获取前端传过来的参数phone,smsCode
    let {
        phone,
        smsCode
    } = ctx.params;
    // 查找用户
    let result = findUser(phone, smsCode);
    // 找不到
    if (!result) {
        ctx.body = {
            code: 604,
            msg: '用户名或密码错误'
        }
    } else {
        // 把userId和其它相关信息加密成一个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() {
      // 发送请求,用post方式
      let url = "/login";
      // 请求参数
      let data = {
        phone: this.phone,
        smsCode: this.smsCode
      };
      this.$axios.post(url, data).then(res => {
        // 修改登陆状态
        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,并放入请求头

// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
    config => {
        console.log('config',config);
        // 从vuex读取token的值,给请求头添加laohu-token
        if (store.state.token) {
            config.headers['laohu-token'] = store.state.token;
        }
        return config
    },
    error => {
        console.log(error) // for debug
        Promise.reject(error)
    }
)

(五) 请求其他接口,就会带上token

image.png

(六) 后台在需要登陆的接口上,获取token,解密token获得userId,返回前端需要的数据

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;
        // 根据userId去数据库查询购物车的列表
        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: 因为我们对vuex做了持久化,用户在下次使用app,发送请求也会带上token,如果token还在有效期内,不需要重新登陆