sunny-auth

基于react router的Route组件，进行再封装，提供一个支持认证授权业务的路由组件。

Installation

使用npm安装

npm i sunny-auth

使用yarn安装

yarn add sunny-auth

使用pnpm安装

pnpm add sunny-auth

Usages

为react router的Router组件定一个共享history实例，后面方便和认证路由进行协同工作。 hashHistory.ts 文件内容为

import { createHashHistory } from 'history'
export default createHashHistory()

实现基本认证逻辑。 integrate.ts 文件内容为

import { implement as AuthImplement } from 'sunny-auth'
import hashHistory from './hashHistory'

AuthImplement({
  authenticate: () => {
    const isLogin = () => {
      return sessionStorage.getItem('token')
        ? Promise.resolve()
        : Promise.reject()
    }
    return isLogin()
  },
  requireLogin: () => {
    hashHistory.push('/login')
  },
})

使用路由组件拦截访问

import React, { FC } from 'react'
import { Router, Route } from 'react-router'
import { AuthRoute } from 'sunny-auth'
import hashHistory from './hashHistory'
import './integrate.ts' // 载入配置逻辑，使认证逻辑正常工作
const App: FC = () => (
  <Router history={hashHistory}>
    <Switch>
      <Route path={'/'} exact>Home Page</Route>
      <AuthRoute path={'/user/profile'}>User Profile Page</AuthRoute>
      <Route path={'/login'}>
        Login Page
        <button onClick={() => {
          sessionStorage.setItem('token', 'xxx')
          hashHistory.goBack()
        }}>登录</button>
      </Route>
    </Switch>
  </Router>
)

更多集成用例

• 集成Auth 的 storybook 文档
• Auth与RBAC授权模块集成 的 storybook 文档
• Auth与ACL授权模块集成 代码

Motivation

为使认证授权业务逻辑更加的通用，因此进行了抽象，分割了认证和授权为两个模块。 对于客户端也许只需要完成登录认证即可满足需求，而对于管理后台则需要配合其他授权模块完成更复杂权限管理逻辑。

Browser Compatibility

Changelog

See CHANGELOG.md