登錄後顯示用戶信息

一 後端獲取用戶信息接口

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

四 測試