@witlink/usercenter lib库介绍

用户中心的用户管理、角色管理、菜单管理和组织机构管理页面，在内部多系统都有使用需要。而且页面的功能、交互逻辑差异不大。因此，希望用户中心在作为独立的管理系统的同时，还可以将部分页面提供给其他系统使用。

如何发布npm包

如何发布npm包

如何使用@witlink/usercenter包

1. 安装@witlink/usercenter包

npm install @witlink/usercenter

2. 使用@witlink/usercenter包

import {
  changeLanguage,     // 切换多语言方法
  changeTheme,        // 切换用户中心页面主题颜色
  UserCenter,         // 用户中心初始化注册内部使用的 vue-i18n、pinia等
  setToken,           // 存储token到localStorage的方法

  // 以下为组件
  SysFunctions,       // 菜单管理
  SysOrgan,           // 组织架构管理
  SysRole,            // 角色管理
  SysUser,            // 用户管理
  SysUserInfo,        // 个人中心
} from '@witlink/usercenter'

• 初始化用户中心

// 在应用初始化时调用该方法
import { UserCenter } from "@witlink/usercenter"

const app = createApp(App)

// i18n 为vue-i18n实例  pinia 为pinia实例
// export interface UserCenterOptions {
//   lang?: LangType
//   systemId?:  'usercenter' | 'cis' | 'ami3.0'
//   i18n: any
//   logoutToUrl: string
//   pinia?: any
//   themeColor?: ColorOptions
// }

app.use(UserCenter, {
  i18n,
  systemId: 'usercenter' | 'cis' | 'ami3.0', // 系统名称 用于用户中心页面的多语言
  logoutToUrl: string, // 在当前页面token失效后跳转的地址
  pinia, // 设置用户中心store 如果在主系统已加载piniaPluginPersistedstate 持久化插件则不需要设置
  lang: 'zh_CN',
  themeColor: {
    colorPrimary: '#1677ff',
  },
}) // 引入用户中心Portal

• 存储token到localStorage的方法

// 在登录成功后获取到token和token变化后调用setToken
import { setToken } from "@witlink/usercenter"
const token = 'xxx'
setToken(token: string)

• 切换多语言

// 在应用初始化和切换多语言时调用该方法
import { changeLanguage } from "@witlink/usercenter"
type LangType = 'zh_CN' | 'en_US' | 'fr_FR'
changeLanguage(lang: LangType)

• 切换用户中心页面主题颜色

import { changeTheme } from "@witlink/usercenter";
export interface ColorOptions {
  colorPrimary?: string
  colorPrimaryBorder?: string
  colorPrimaryBorderHover?: string
  colorPrimaryText?: string
  colorPrimaryTextActive?: string
  colorPrimaryTextHover?: string
  colorLink?: string
  colorLinkHover?: string
  colorLinkActive?: string
}
const options: ColorOptions = {
  colorPrimary: '#1677ff',
}
changeTheme(options)

• usercenter页面的使用

import {
  SysFunctions,       // 菜单管理
  SysOrgan,           // 组织架构管理
  SysRole,            // 角色管理
  SysUser,            // 用户管理
  SysUserInfo,        // 个人中心
} from '@witlink/usercenter'

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/role",
      name: "role",
      component: SysRole,
      meta: {
        title: "角色管理",
      },
    },
    {
      path: "/user",
      name: "user",
      component: SysUser,
      meta: {
        title: "用户管理",
      },
    },
    {
      path: "/functions",
      name: "functions",
      component: SysFunctions,
      meta: {
        title: "菜单管理",
      },
    },
    {
      path: "/organ",
      name: "organ",
      component: SysOrgan,
      meta: {
        title: "组织机构管理",
      },
    },
  ],
  scrollBehavior: () => ({ left: 0, top: 0 }),
});

export default router;

• 用户中心接口转发配置

// 在开发环境
// vite.config.ts中
 server: {
    host: true,
    cors: true,
    proxy: {
      '/usercenter/api': {
        target: '当前系统的接口代理地址', //目标url
        changeOrigin: true, //支持跨域
        secure: false, // 跳过 HTTPS 证书检查
      },
    },
  },

# 配置nginx转发
location /usercenter/api/ {
  # proxy_pass  http://webhost;
  proxy_pass  http://https://192.168.2.240;
}