第55章 头像图片的前端渲染显示
1 WebApi.Controllers.CustomerController.GetCustomerByToken
///
///
/// 【通过令牌获取用户-无需权限】
///
///
/// 摘要：
/// 通过1个指定的令牌字符串，获取用户实体的1个指定实例。
///
///
/// 返回：
/// 用户实体的1个指定实例。
///
[HttpGet]
public async Task<MessageModel<Customer>> GetCustomerByToken(string token)
{
if (!string.IsNullOrEmpty(token))
{
JwtBearerModel _jwtBearerModel = Framework.Infrastructure.Extensions.JwtBearerExtensions.SerializeToken(token);
if (_jwtBearerModel != null && _jwtBearerModel.CustomerId > 0)
{
Customer _customer = await _customerService.GetCustomerByIdAsync(_jwtBearerModel.CustomerId);
return MessageModel<Customer>.GetSuccess("成功通过令牌字符串，获取单个指定用户！", _customer);
}
}
return MessageModel<Customer>.Fail("通过令牌字符串，获取单个指定用户失败！", 500);
}
2 向src\common\http.api.js添加定义
//通过1个指定的令牌字符串，获取1个指定用户头像图片绝对URL路径。
export const getCustomerByToken = async params => {
return await axiosInterceptor.get('/Customer/GetCustomerByToken', {
params: params
});
};
//获取1个指定用户头像图片绝对URL路径。
export const getAvatarUrl = async params => {
return await axiosInterceptor.get('/Customer/GetAvatarUrl', {
params: params
});
};
3 向src\views\LoginView.vue\submitLogin添加定义
let loginParams = {
email: this.formLogin.account,
password: this.formLogin.checkPass
};
let res = await postCustomerLogin(JSON.stringify(loginParams));
localStorage.user = res.data.response.token;
let userToken = 'Bearer ' + res.data.response.token;
this.$store.commit("saveToken", userToken);
4 \src\components\InitUserMenu.vue
111
{{name}}
我的消息
.el-header .userinfo {
margin-top: 7px;
text-align: right;
float: right;
width: auto;
}
.el-header .userinfo .userinfo-inner {
cursor: pointer;
color: #fff;
float: right;
}
5 向src\components\AdminLayoutComponen.vue添加定义
import router from '../router/index.js'
import initUserMenu from '@/components/InitUserMenu.vue'
export default {
components: {
initUserMenu,
},
对以上功能更为具体实现和注释见：230309_013shopvue( 头像图片的前端渲染显示)。