# msun-auth-platform-app

**Repository Path**: HSKS/msun-auth-platform-app

## Basic Information

- **Project Name**: msun-auth-platform-app
- **Description**: msun统一认证平台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-18
- **Last Updated**: 2025-02-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端接入流程
### a)引入qiankun框架
```shell
npm install qiankun --save
```

### b)定义全局配置
本地调试环境变量（.env.locals）
```shell
NODE_ENV = 'locals'   
VUE_APP_BASE_API = 'https://172.16.2.125/srv-csg'
# qiankun框架必备信息
VUE_APP_PUBLIC_PATH = 'http://127.0.0.1::8085/' # webpack的publicPath
VUE_APP_BASE_ROUTE = '/microApp/consanguinity'
# 仿登录配置
VUE_APP_OPEN_AUTH_API = 'http://172.16.2.115:30548/srv-auth/'
VUE_APP_OPEN_APP_ID = '6039965334925347842'
```
开发环境变量配置（.env.dev）
```shell
# 基本信息
NODE_ENV = 'development'   
VUE_APP_BASE_API = 'https://172.16.2.125/srv-csg'
# qiankun框架必备信息
VUE_APP_PUBLIC_PATH = 'https://172.16.2.125/web-csg/' # webpack的publicPath
VUE_APP_BASE_ROUTE = '/microApp/consanguinity' # 匹配路由路径
```
生产环境的配置信息跟开发环境的区别就是IP不一样了，其他的一模一样

### c)修改webpack的配置文件（vue.config.js）
```javascript
const {name} = require('./package.json')
module.exports = {
  transpileDependencies: true,
  lintOnSave: false,
  productionSourceMap: false,
  publicPath: process.env.VUE_APP_PUBLIC_PATH, //配置webpack的publicPath
  outputDir: 'web-csg', //打包文件输出路径
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].parallel = 4
      args[0].terserOptions.compress.warnings = true
      args[0].terserOptions.compress.drop_debugger = true
      args[0].terserOptions.compress.drop_console = true
      args[0].terserOptions.keep_fnames = true
      return args
    })
  },
  //配置webpack打包方式
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}` // webpack 4 需要把 chunkLoadingGlobal 替换成 jsonpFunction
    }
  },
  //配置本地开发调试环境的端口以及跨域
  devServer: {
    port: 8084, // 端口号
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },

  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            // 把px单位换算成rem单位
            require('postcss-pxtorem')({
              rootValue: 16, // 换算的基数 375的设计稿，换算基数就是37.5 ,本项目是1920，则192
              propList: ['*'], // 可以从px更改为rem的属性。
              selectorBlackList: [], // 要忽略的选择器并保留为px。
              minPixelValue: 2 // 设置要替换的最小像素值。
            })
          ]
        }
      }
    }
  }
}

```

### d)在src目录新增public-path.js文件
```javascript
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = process.env.VUE_APP_PUBLIC_PATH;
}

```
### e)修改main.js文件
```javascript
import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';


Vue.config.productionTip = false;


let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
base: process.env.VUE_APP_BASE_ROUTE || '', //修改跟路由地址
mode: 'hash', // 使用hash的方式进行路由跳转
      routes,
  });


  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}


// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}


export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}
```

### f)7、开发过程中，登录接口开放平台有提供如下接口，为了方便后续对接请用以下接口进行模拟登录，上线后登录页面不会展示，直接进入首页：
http://172.16.2.115:30548/doc.html#/OPEN-API/%E5%BC%80%E6%94%BEAPI/openLoginUsingPOST
登录成功后会保存如下信息:
```javascript
localStorage.setItem('name', res.name)
localStorage.setItem('uname', res.uname)
localStorage.setItem('appName', res.appName)
localStorage.setItem('roleLevel', `${res.roleLevel}`)
localStorage.setItem('defaultAppInfo', JSON.stringify(res))
if (res.permStrs && res.permStrs.length) {
  localStorage.setItem('permStrs', res.permStrs.join(","))
}
if (res.roles) {
  localStorage.setItem("roles", JSON.stringify(res.roles))
}
if (res.menuList) {
  localStorage.setItem("menuList", JSON.stringify(res.menuList))
}

```
### g)前端自定义v-perm指令：
```javascript
Vue.directive('perm', function (el, binding) {
  const permStrs = localStorage.getItem('permStrs') || ''
  if (binding.value && permStrs?.indexOf(binding.value) === -1) {
    el.style.display = 'none'
  }
})
```
然后前端就可以使用上面的指令来控制元素隐藏显示了：
```html
<button v-perm="user:list:insert">点击</button>
<-- 只有用户拥有user:list:insert权限字符串，才可以展示该按钮 -->
```

### h)前端部署脚本：
```shell
# 备份
timestamp=$(date +%Y%m%d%H%M%S)
bak_name=dist-${timestamp}
# 先备份
echo "开始备份文件..."
sudo cp  -r /msun/app/nginx_outport/html/web-csg /msun/app/nginx_outport/html/copy/web-csg/$bak_name
echo "备份完成"
# 再移除
echo "开始移除文件..."
sudo rm -r /msun/app/nginx_outport/html/web-csg
echo "移除完成"

# 复制到指定的部署目录
sudo cp -r /msun/consanguinity-ui-dev/web-csg /msun/app/nginx_outport/html/web-csg

sudo docker restart nginx_outport
```