@jxstjh/auth-client
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.4-beat • Public • Published

    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: 'https://count.jxwrd.gov.cn:30111', // 统一上报服务器
      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: 'https://auth-test.jxwrd.gov.cn/',// 必填 sso认证地址 
          resourceCode: 'code', // 必填 resourceCode || 'code'
        })
        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.loginData = new AuthClient({
          routerMode: 'history', // 'history'||'hash' 根据实际项目路由情况选择 缺省值'hash'
          SSOServer: 'https://auth-test.jxwrd.gov.cn/',// 必填 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.loginData.login({
      username: '', // (必填)账号
      password: '', // (必填)密码
    }).then((res) => {
      console.log(res)
    })
    

    流程说明

    oxwr3.png

    Keywords

    Install

    npm i @jxstjh/auth-client

    DownloadsWeekly Downloads

    60

    Version

    0.1.4-beat

    License

    MIT

    Unpacked Size

    201 kB

    Total Files

    29

    Last publish

    Collaborators

    • gemini900621