一 后端获取用户信息接口
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"> </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"> </em>
</a>
<q class="red-point"> </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')
}
}