nuxt框架前后端登录注册功能实现(三)

流程图：

以下代码所有的cookie都是引入js-cookie之后的，没有下载该库和引用该库均会报错：
引入代码：
import cookie from 'js-cookie'

登录核心代码：

//调用接口发起登录请求
login.loginUser(this.user)
              .then(response => {//返回code为100代表成功
                if (response.data.code === 100) {
                  //第二步，利用js-cookie把获取的token放到cookie中去
                  //第一个参数:给cookie取个变量名，第二个参数:cookie的值,第三个值:domain cookie作用域
                  cookie.set('guli_token', response.data.data.token, {domain: 'localhost'})
                  //第三步在requests.js创建拦截器
                  //第四步调用接口，通过token获取用户信息并存在cookie中
                  login.getUserInfoByToken()
                  .then(response => {
                    cookie.set('guli_info', response.data.data.info, {domain: 'localhost'})
                    //从登录页面跳转到首页
                    window.location.href = '/'
                  })

                } else {
                  this.$message({
                    type: 'error',
                    message: '登录失败，请检查邮箱和密码是否正确'
                  })
                }

login.loginUser是自己编写的js对象，作用就是向后端发起登录请求
终于到了前端登录实现过程了，
需要的第三方库有：js-cookie,axios
js-cookie方便操作对cookie的增删，因为需要将后端登录成功传递过来的token进行存储到cookie中去，
封装axios并定义一个拦截器：
如下：
requests.js

import axios from 'axios'
import cookie from 'js-cookie'

const service = axios.create({
  baseURL: 'http://localhost:9001',
  timeout: 20000
});
service.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    //判断cookie中是否有名为guli_token的数据
    if (cookie.get('guli_token')) {
      //把获取的cookie值放到header中
      config.headers['token'] = cookie.get('guli_token');
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  });
export default service

当登录成功时，后端返回了token之后，存入进cookie中，并根据后端接口，利用token得到一些用户信息，eg:头像，昵称，id等等
因为后端根据token获取用户信息的接口是，在HttpServletRequests中Header内取出token。
所以拦截器的作用就体现出来了，拦截器代码的意思是，如果cookie中存在token这个东西，就把axios发送的每个请求的header加上token，方便于后续请求后端接口时得request的header中含有token信息，

token和用户info最后都存在了cookie中，并且是以字符串形式，所以使用的时候需要利用到js中的JSON.parse方法进行转换

showInfo(){
        //获取得到的是一个字符串，需要转化为json对象
        var infoStr = cookie.get('guli_info')
        if (infoStr){
         this.info = JSON.parse(infoStr)
        }
}