十三天

登录前端整合

输入密码之后跳转登录页面

1. 在api中定义文件login.js 文件 ，定义登录的方法：

import request from '@/utils/request'

export default {
    //登录的方法
  submitLogin(userInfo) {
    return request({
      url: `/centerservice/member/login`,
      method: 'post',
      data:userInfo
    })
  },

  //根据token获取用户的信息
  getLoginUserInfo() {
    return request({
      url: `/centerservice/member/getMemberInfo`,
      method: 'get'
    })
  }
}

2. 在登录页面进行方法的调用：需要在page中创建login.vue,并安装js-cookie插件

登录和登录之后首页面显示数据实现过程分析：
1.调用接口登录返回token字符串
2.把返回的token字符串放到cookie中
3.创建拦截器:判断cookie里面是否有token字符串，如果有，把token字符串放到header（请求头 中）--可以在request中编写拦截器的代码：

拦截器的创建

//http request 拦截器
service.interceptors.request.use( //表示在每次请求中使用拦截器
  config => {
    //判断cookie中是否有名称是xiaofan_token的数据，有的话，就放在header中
    if(cookie.get("xiaofan_token")){
      //把获取到的cookie值放到header里面
      config.headers['token'] = cookie.get('xiaofan_token');
    }
    return config
  },
  err => {
    return Promise.reject(err);
  })

目的:为了能够在后台接口能够调用到
4.根据token的值，调用接口，根据token获取用户信息，主要为了在首页面进行显示，把调用接口返回的用户信息放到cookie中
5.在首页面中显示用户信息：从4中获取到用户信息

微信扫码登录

什么是OAuth2

微信登录