# auth-client

**Repository Path**: guining/auth-client

## Basic Information

- **Project Name**: auth-client
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-26
- **Last Updated**: 2022-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# AuthClinet

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

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

```jvacscript
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 工具类
```jvacscript
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)
  })
```

### 保留登录页
```jvacscript
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](https://e.im5i.com/2021/07/25/oxwr3.png)