@jxstjh/auth-client

AuthClinet

匹配4a单点SSO的前端工具包.

如何使用

当你熟悉单点SSO背后的流程后,你会发现其实变通使用的方法非常自由.但是我们强烈建议按照本文档的使用方法 $ npm install @jxstjh/auth-client

站点统计工具类

import { SiteAnalysis } from '@jxstjh/auth-client'

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
window.SA = new SiteAnalysis({
  siteAnalysisServer: 'http://xxx.com', // 统一上报服务器
  appId: 'xxxx', // appId 人工申请
  interval: 30, // 上报日志频率 单位秒
  production: IS_PROD // 开发模式下不上报
})
// 在全局路由拦截器中 加入页面访问日志
router.afterEach(() => {
  window.SA.recordPage() // 记录页面log
  // something else...
})
// 登录成功时候 取到用户名
window.SA.setLoginName(loginName)

SSO 工具类

import { AuthClient } from '@jxstjh/auth-client'

const startupService = () => {
  return new Promise((resolve, reject) => {
    // doSomething else ...根据实际情况执行其它前置逻辑
    const ac = new AuthClient({
      routerMode: 'history', // 'history'||'hash' 根据实际项目路由情况选择 缺省值'hash'
      SSOServer: 'http://xxx.com',// 必填 sso认证地址 
      resourceCode: 'code', // 必填 resourceCode || 'code',
      DingAutoLogin : false  // 钉钉环境下免登录操作 内部自动会在SSOServer后面拼接 '/ddLoad'
    })
    ac.on('error', (err) => {
      return reject(err)
    })
    ac.on('inited', (e) => {
      console.log(e)
      // TODO:成功拿到用户信息及token
      // 设置好vuex
      return resolve()
    })
  })
}
startupService()
  .then(()=>{
    new Vue({
     router,
     store,
     render: h => h(App)
   })
  })
  .catch((err) => {
    console.log(err)
  })

保留登录页

import { AuthClient } from '@jxstjh/auth-client'

const startupService = () => {
  return new Promise((resolve, reject) => {
    const ac = window.AC = new AuthClient({
      routerMode: 'history', // 'history'||'hash' 根据实际项目路由情况选择 缺省值'hash'
      SSOServer: 'http://xxx.com',// 必填 sso认证地址
      resourceCode: 'code', // 必填 resourceCode || 'code'
      method: 'custom', // 重要，不添加该属性会自动跳转至 4A 登录页
    })

    ac.on('inited', (e) => {
      // TODO:成功拿到用户信息及token
      // 设置好vuex
      return resolve(e)
    })
  })
}
startupService()
  .then((e) => {
      new Vue({
         router,
         store,
         beforeCreate() {
            if (e && e.umsAdmin && e.tokenInfo) {
              //this.$router.push('/index') // 跳转首页
            } else {
              //this.$router.push('/login') // 跳转登录页
            }
         },
         render: h => h(App)
      })
  })
  .catch((err) => {
    console.log(err)
  })

// 登录
window.AC.login({
  username: '', // （必填）账号
  password: '', // （必填）密码
}).then((res) => {
  console.log(res)
})

日志收集

// 接入日志收集，需在 new AuthClient 的参数基础上，添加 logCollectOption 对象 
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
window.SA = new AuthClient({
	SSOServer: 'http://xxx.com',
	resourceCode: 'code',
    logCollectOption: {
        logCollectServer: 'http://xxx.com', // 日志收集接口地址（必填）
        production: IS_PROD, // 开发模式下不上报
        interval: 10 // 间隔时间上传已有数据
    }
})

/**
 * 相关按钮添加记录
 * @params eventType  ADD(1), DELETE(2), MODIFY(3), IMPORT(4),
 *                    EXPORT(5), LOGIN(6), LOGOUT(7), OTHER(8),
 * @params eventName  触发组件名称
 * */
window.SA.recordEvent(1, '按钮')

// 添加浏览记录
router.afterEach(() => {
	window.SA.logRecordPage()
})

// 日志错误
window.SA.on('logError', function (e) {
  console.log('logError:', e)
})

// 日志收集销毁
window.SA.logDestroy()

流程说明