vue界面显示登录之后的用户信息

具体流程

 

 

 

 

准备工作

安装js-cookie插件把用户信息放进cookie

　　npm install js-cookie

引入cookie

import cookie from 'js-cookie'

 

代码实现

 //登录的方法

      submitLogin() {

        //第一步 调用接口进行登录，返回token字符串

        loginApi.submitLoginUser(this.user) 

           .then(response => {

             //第二步 获取token字符串放到cookie里面

             //第一个参数cookie名称，第二个参数值，第三个参数作用范围

             cookie.set('guli_token',response.data.data.token,{domain: 'localhost'})

              //第三步 在全局请求中设置request 拦截器...

             

              //第四步 调用接口 根据token获取用户信息，为了首页面显示

              loginApi.getLoginUserInfo()

                .then(response => {

                  this.loginInfo = response.data.data.userInfo

                  //获取返回用户信息，放到cookie里面

                  cookie.set('guli_ucenter',this.loginInfo,{domain: 'localhost'})

                  //跳转页面

                  window.location.href = "/";

                })

           })

      }

 

// 第三步.http request 拦截器（写在封装axios请求中）

service.interceptors.request.use(

  config => {

  //debugger

  if (cookie.get('guli_token')) {

    config.headers['token'] = cookie.get('guli_token');

  }

    return config

  },

  err => {

  return Promise.reject(err);

})

 

 

 

在数据显示界面取出cookie

 

方法

 showInfo(){

      var userStr=cookie.get('guli_ucenter')

      if(userStr){

        this.loginInfo=JSON.parse(userStr)//cookie中得到的都是字符串，需要转化

      }

 

退出方法

 

logout(){

       cookie.set('guli_token','',{domain: 'localhost'})

       cookie.set('guli_ucenter','',{domain: 'localhost'})

       window.location.href="/"

    

    }