vue3+antd——实现App.vue页面实时获取权限+用户信息的功能——基础积累

之前写过一篇文章关于vue3+antd的框架模板，链接如下：http://t.csdn.cn/9dZMS

1.App.vue代码

<template>
  <ConfigProvider :locale="locale">
    <ThemeProvider is-root v-bind="themeConfig" :apply-style="false" :color="{ primary: { DEFAULT: '#f90' } }">
      <stepin-view
        system-name=""
        logo-src="@/assets/logo.png"
        :class="`${contentClass}`"
        :user="user"
        :navMode="navigation"
        :useTabs="useTabs"
        :themeList="themeList"
        v-model:show-setting="showSetting"
        v-model:theme="theme"
        @themeSelect="configTheme"
      >
        <template #headerActions>
          <HeaderActions @showSetting="showSetting = true" />
        </template>
      </stepin-view>
    </ThemeProvider>
  </ConfigProvider>
</template>

2.js代码

<script lang="ts" setup>
  import { ConfigProvider } from 'ant-design-vue';
  import { reactive, ref, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { useAccountStore, useSettingStore, storeToRefs } from '@/store';
  import avatar from '@/assets/avatar.png';
  import { HeaderActions } from '@/components/layout';
  import { configTheme, themeList } from '@/theme';
  import { ThemeProvider } from 'stepin';
  const { logout, profile } = useAccountStore();
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';
  import 'dayjs/locale/ar';
  import 'dayjs/locale/en';
  dayjs.locale('zh-cn');
  import zhCN from 'ant-design-vue/es/locale/zh_CN.js';
  const showSetting = ref(false);
  const router = useRouter();
  const locale = zhCN;
  // 获取个人信息
  profile((response, account) => {});
  let user = computed(() => {
    const { account } = storeToRefs(useAccountStore());
    return {
      name: account?.value?.name,
      avatar: account?.value?.headPhoto || avatar,
      menuList: [
        { title: '个人中心', key: 'personal', icon: 'UserOutlined', onClick: () => router.push('/userInfo') },
        { type: 'divider' },
        {
          title: '退出登录',
          key: 'logout',
          icon: 'LogoutOutlined',
          onClick: () =>
            logout().then(() => {
              router.replace('/login');
            }),
        },
      ],
    };
  });
  const { navigation, useTabs, theme, contentClass } = storeToRefs(useSettingStore());
  const themeConfig = computed(() => themeList.find((item) => item.key === theme.value).config);
</script>

重要的代码如下：

  // 获取个人信息,只要是刷新整个系统，也就是刷新浏览器的时候，就会触发这个`profile`的方法来获取权限。
  import { useAccountStore, useSettingStore, storeToRefs } from '@/store';
  const { logout, profile } = useAccountStore();
  profile((response, account) => {});
  //为了实时获取用户信息，则需要通过这个`computed`计算属性来处理。
  let user = computed(() => {
    const { account } = storeToRefs(useAccountStore());
    return {
      name: account?.value?.name,
      avatar: account?.value?.headPhoto || avatar,
      menuList: [
        { title: '个人中心', key: 'personal', icon: 'UserOutlined', onClick: () => router.push('/userInfo') },
        { type: 'divider' },
        {
          title: '退出登录',
          key: 'logout',
          icon: 'LogoutOutlined',
          onClick: () =>
            logout().then(() => {
              router.replace('/login');
            }),
        },
      ],
    };
  });