登录后显示用户信息

刺骨的言语ヽ痛彻心扉 2021-07-24 12:53 465阅读 0赞

# 一 后端获取用户信息接口 #

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 获取用户信息的脚本 ##

## 3 登录后显示用户信息 ##

<ul class="h-r-login">
 <li v-if="!userInfo" id="no-login">
 <a href="/login" title="登录">
  
 登录
 </a>
 |
 <a href="/register" title="注册">
 注册
 </a>
 </li>
 
 <li v-if="userInfo" id="is-login-one" class="mr10">
 <a id="headerMsgCountId" href="#" title="消息">
  
 </a>
 <q class="red-point"> </q>
 </li>
 
 <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
 >
 {
 { userInfo.nickname }}
 </a>
 <a href="javascript:void(0)" title="退出" class="ml5" @click="logout()">退出</a>
 </li>
 
 </ul>

## 4 登出 ##

html注册事件

登出脚本

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')
        }
      }

# 四 测试 #

![20201227201603251.png][]

[20201227201603251.png]: /images/20210724/f358d8478752495caeceea47d45ae393.png