第55章 头像图片的前端渲染显示

1 WebApi.Controllers.CustomerController.GetCustomerByToken

  /// <param name="token">1个指定的令牌字符串。</param>

        /// <summary>

        /// 【通过令牌获取用户-无需权限】

        /// </summary>

        /// <remarks>

        /// 摘要：

        ///     通过1个指定的令牌字符串，获取用户实体的1个指定实例。

        /// </remarks>

        /// <returns>

        /// 返回：

        ///    用户实体的1个指定实例。

        /// </returns>

        [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

<template>

    <el-row :gutter="20">

        <el-col :span="20">

            111

        </el-col>

        <el-col :span="4" class="userinfo">

            <el-dropdown trigger="hover" style="hight: 40px; line-height: 40px;" placement="bottom-end">

                <span class="el-dropdown-link userinfo-inner">

                    {{name}}

                    <el-avatar :size="40" style="vertical-align: middle">

                        <!-- <img src="../assets/AvatarDemo.png" /> -->

                        <!-- <img :src="assetsAvatarDemo" /> -->

                        <img :src="avatarUrl" />

                    </el-avatar>

                </span>

                <template #dropdown>

                    <el-dropdown-menu>

                        <el-dropdown-item>

                            <el-badge :value="2" class="item" type="warning">

                                我的消息

                            </el-badge>

                        </el-dropdown-item>

                        <el-dropdown-item divided @click="loginOut">退出登录</el-dropdown-item>

                    </el-dropdown-menu>

                </template>

            </el-dropdown>

        </el-col>

    </el-row>

</template>

<script>

    import importAvatarDemo from '../assets/AvatarDemo.png';

    import {

        getCustomerByToken,

        getAvatarUrl,

    } from '../common/http.api.js';

    export default {

        data() {

            return {

                assetsAvatarDemo: "",

                avatarUrl: "",

                name: "",

            };

        },

        methods: {

            //初始化用户信息菜单组件。

            async initUserMenu() {

                let tokenParam = {

                    token: localStorage.getItem('user'),

                };

                let customer = await getCustomerByToken(tokenParam);

                this.name = customer.data.response.name;

               

                let customerIdParam = {

                    customerId: customer.data.response.id,

                };

                let res = await getAvatarUrl(customerIdParam);

                this.avatarUrl = res.data.response;

            },

            //注销退出事件，在使用Jwt登录时，只要把前端全局变更所存储的令牌字符串即可以，后端定义还是不定义注销退出控制器行为方法并不是必须的。

            async loginOut() {

                let token = localStorage.getItem('Token');

                console.log(token);

                localStorage.removeItem('Token');

                token = localStorage.getItem('Token');

                console.log(token);

                if (token === null || token === '') {

                    this.$router.push('/Login')

                }

            },

        },

        async mounted() {

            this.assetsAvatarDemo = importAvatarDemo;

            await this.initUserMenu();

        },

    }

</script>

<style scoped lang="scss">

    .el-header .userinfo {

        margin-top: 7px;

        text-align: right;

        float: right;

        width: auto;

    }

    .el-header .userinfo .userinfo-inner {

        cursor: pointer;

        color: #fff;

        float: right;

    }

</style>

5 向src\components\AdminLayoutComponen.vue添加定义

  <el-header>

          <initUserMenu></initUserMenu>

 </el-header>

 import router from '../router/index.js'

    import initUserMenu from '@/components/InitUserMenu.vue'

    export default {

        components: {

            initUserMenu,

        },

对以上功能更为具体实现和注释见：230309_013shopvue( 头像图片的前端渲染显示)。