vue中使用cookie将token解析把用户信息显示在页面

步骤导图

• 第一步

```javascript
import axios from 'axios'
import cookie from 'js-cookie'
import {
    MessageBox,
    Message
  } from 'element-ui'
const service=axios.create({
    baseURL:'http://localhost:9001',
    timeout: 20000
})
//创建拦截器 获取token 传递token到cookie中
service.interceptors.request.use(
    config => {
      //判断cookie里面是否有lmh_token数据
      if (cookie.get('lmh_token')) {
        //把获取到的token放入cookie
        config.headers['token'] = cookie.get('lmh_token');
      }
      return config
    },
    err => {
      return Promise.reject(err);
    })

 - 第二步
 

```javascript
import request from '@/utils/request'
export default {
  //根据token获取用户信息
  getLoginMemberInfo() {
    return request({
      url: `/ucenter/member/getMemberInfo`,
      method: 'get'
    })
  },

  //登录
  loginMember(memberInfo) {
    return request({
      url: `/ucenter/member/login`,
      method: 'post',
      data: memberInfo
    })
  },

  //根据id获取用户信息
  getMemberInfo(id) {
    return request({
      url: `/ucenter/member/getUserInfoOrder/${id}`,
      method: 'post'
    })
  },

• 第三步

 //登录的方法
      submitLogin() {
        //调用登录接口 返回token字符串
        loginApi.loginMember(this.user)
          .then(response => {
            //获取到的token字符串放入cookie
          //  1.cookie名称，2.token参数值，3.作用范围-在什么样的请求中
            cookie.set("lmh_token",response.data.data.token,{domain:'localhost'})
            //调用接口 根据token解析出用户信息 给首页用
            loginApi.getLoginMemberInfo()
              .then(response => {
                this.loginInfo = response.data.data.userInfo
                //获取返回的用户信息  放入cookie
                cookie.set("lmh_ucenter",this.loginInfo,{domain:'localhost'})
                // 路由跳转 跳转守页面
                this.$router.push({path: '/'})
              })
          })
      },

• 第四步

methods: {
      //从cookie中获取用户信息
      showInfoFromCookie() {
        //从cookie中获取用户信息
        var userStr = cookie.get("lmh_ucenter")
        //userStr是字符串   需要转换为json对象
        if (userStr) {
          this.loginInfo = JSON.parse(userStr)
        }
      },

sso单点登录链接如下

sso单点登录文章