登录后显示用户信息

一 后端获取用户信息接口

web层

/**
* 功能描述：根据token获取登录信息
*
* @param request http请求
* @return R 返回给前端的数据
* @author cakin
* @date 2020/12/27
*/
@ApiOperation(value = "根据token获取登录信息")
@GetMapping("get-login-info")
public R getLoginInfo(HttpServletRequest request) {
    try {
        JwtInfo jwtInfo = JwtUtils.getMemberIdByJwtToken(request);
        return R.ok().data("userInfo", jwtInfo);
    } catch (Exception e) {
        log.error("解析用户信息失败：" + e.getMessage());
        throw new GuliException(ResultCodeEnum.FETCH_USERINFO_ERROR);
    }
}

二 前端整合

1 api

  // 获取用户登录信息
  getLoginInfo() {
    return request({
      baseURL: 'http://localhost:8160',
      url: '/api/ucenter/member/get-login-info',
      method: 'get'
      // 通过请求头发送token
    //   headers: { 'token': cookie.get('guli_jwt_token') }
    })
  }

2 获取用户信息的脚本

<script>
import loginApi from '~/api/login'
import cookie from 'js-cookie'


export default {
  data() {
    return {
      userInfo: null
    }
  },


  created() {
    this.getUserInfo()
  },


  methods: {
    getUserInfo() {
      // 如果cookie中的token值不存在，则无需获取用户信息
      if (!cookie.get('guli_jwt_token')) {
        return
      }

      // 如果token存在，则携带token的值向服务器发起请求
      loginApi.getLoginInfo().then(response => {
        // 渲染页面
        this.userInfo = response.data.userInfo
      })
    }
  }
}
</script>

3 登录后显示用户信息

        <ul class="h-r-login">
          <li v-if="!userInfo" id="no-login">
            <a href="/login" title="登录">
              <em class="icon18 login-icon">&nbsp;</em>
              <span class="vam ml5">登录</span>
            </a>
            |
            <a href="/register" title="注册">
              <span class="vam ml5">注册</span>
            </a>
          </li>
          <!-- 注意undis将当前节点隐藏了 -->
          <li v-if="userInfo" id="is-login-one" class="mr10">
            <a id="headerMsgCountId" href="#" title="消息">
              <em class="icon18 news-icon">&nbsp;</em>
            </a>
            <q class="red-point">&nbsp;</q>
          </li>
          <!-- 注意undis将当前节点隐藏了 -->
          <li v-if="userInfo" id="is-login-two" class="h-r-user">
            <a href="/ucenter" title>
              <img
                :src="userInfo.avatar"
                width="30"
                height="30"
                class="vam picImg"
                alt
              >
              <span id="userName" class="vam disIb">{{ userInfo.nickname }}</span>
            </a>
            <a href="javascript:void(0)" title="退出" class="ml5" @click="logout()">退出</a>
          </li>
          <!-- /未登录显示第1 li；登录后显示第2，3 li -->
        </ul>

4 登出

html注册事件

<a href="javascript:void(0)" title="退出" class="ml5" @click="logout()">退出</a>

登出脚本

    logout() {
      // 清除cookie
      cookie.set('guli_jwt_token', '', { domain: 'localhost' })
      // 跳转页面
      window.location.href = '/'
    }

三 前端拦截器

1 统一发送header

让所有请求都自动在header中携带token：

utils/request.js中修改请求拦截器，此时login.js中不用传递header信息

import cookie from 'js-cookie'

// http request 拦截器
service.interceptors.request.use(
  config => {
    // 当cookie中获取到了token信息时，则将token放在header中随请求发送给服务端接口
    if (cookie.get('guli_jwt_token')) {
      config.headers['token'] = cookie.get('guli_jwt_token')
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

2 用户信息获取失败处理

utils/request.js

在响应拦截器中显示错误消息

  response => {
    /**
       * code为非20000是抛错 可结合自己业务进行修改
       */
    const res = response.data
    if (res.code === 20000) { // 返回正确的结果
      return response.data
    } else if (res.code === 23004) { // 获取用户信息失败
      // 清除cookie
      cookie.set('guli_jwt_token', '', { domain: 'localhost' })
      return response.data
    } else { // 其他错误的结果
      Message({
        message: res.message || 'error',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject('error')
    }
  }

四 测试