1. 程式人生 > >淺談關於react router 許可權那些事

淺談關於react router 許可權那些事

背景

近期做了一個 spa的單獨專案中,有個需求就是希望根據登入人來看下,這個人是不是有許可權進入當前頁面。雖然服務端做了進行介面的許可權,但是每一個路由載入的時候,都要去請求這個介面太浪費了。

需要考慮的

  • 登入授權,使用者沒有登入只能訪問登入頁面,如果處於登入狀態則跳轉到當前使用者的預設首頁

  • 路由授權,當前登入使用者的角色,如果對一個 URL 沒有許可權訪問,則會呈現403

  • 資料授權,當訪問一個沒有許可權的API,則跳轉到 403 頁面

  • 操作授權,當頁面中某個按鈕或者區域沒有許可權訪問則在頁面中隱藏

期望

在路由層面攔截掉,當前這個人對應路由沒有許可權,面丟擲 403,且原元件也不會載入,當然也不會有任何請求

準備工作

react router4 、react-router-config、recompose、狀態資料管理庫(本文用的 rematch )、hoc(高階元件)

登入授權方案

router 早期版本有進入路由的鉤子函式可以實現這一點,但是 router4 去掉了採取了新的方式。舉個例子,就好比登入來說。貼一段虛擬碼

// app.js
  <Router>
        <Switch>
          { user.userId
            ? <AuthorizedLayout routes={routes} />
            : <UnauthorizedLayout
/>
} </Switch> </Router>
// AuthorizedLayout.js <Slider routes={this.state.routes}> <Switch> <Route path='/' exact render={() => ( <Redirect to='/Home /> )} /> {renderRoutes(this.state.routes)} </Switch> </Slider> // UnauthorizedLayout .js 就是你的 login 元件
複製程式碼

路由授權方案

利用高階元件內部判斷 if 返回什麼 else 返回什麼。 我在下面貼下我怎麼實現的。 routes.js

import { Icon } from 'assets'
import { WithAuthRouter } from '@components'
import Home from './home'
// 這裡也可以用非同步載入看個人喜好
const routes = [
  { path: '/Home', /
    exact: true,
    root: true,
    icon: Icon.COLLABORATION,
    title: '主頁',
    component: WithAuthRouter(Home)
  }
複製程式碼

WithAuthRouter.js這裡我在路由層已經把redux 的props 放到路由裡面去了只要被改函式包過的元件都可以不僅可以拿到 路由資訊還可以拿到 redux 的資訊 這樣我們的元件就不需要 connect 一次我們的元件就比較純粹了

import React from 'react'
import {connect} from 'react-redux'
import { compose, onlyUpdateForKeys, branch, renderComponent } from 'recompose'
import Exception from 'ant-design-pro/lib/Exception'
// 校驗路由許可權元件
const isNotAuth = props => {
// route 本路由表,user 全域性登入資訊、menu 服務端返回的選單列表
  const { route: { path = null }, user = {}, menu = [] } = props
  const { userId = null, roleMap = [] } = user
  if (userId && roleMap.length) {
    const result = menu.find(i => i.menuUrl === path)
    if (result) {
      return !result.userIdList.includes(userId) && !result.userIdList.filter(i => roleMap.includes(i)).length > 0
    }

    return true
  }

  return true
}

const NotFound = () => (
  <Exception type='403' actions />
)

const renderWhileIsNotAuth = branch(
  isNotAuth,
  renderComponent(NotFound)
)

const mapState = state => ({
  user: state.user,
  menu: state.menu,
  inited: state.inited
})

const getUserAndMenu = compose(
  connect(mapState),
  onlyUpdateForKeys(['user', 'menu'])
)

export default compose(
  getUserAndMenu,
  renderWhileIsNotAuth
)

複製程式碼

資料授權

我這裡用的 業務原因僅僅是判斷登入失效所以和服務端約定返回失效的code碼在請求方發裡統一處理掉我這裡用的的 axios 因為有個攔截器所以在攔截器裡做了

axios.interceptors.response.use(config => {
  const { data, status } = config
  if (status && status === 200) {
    // 圖片上傳介面返回的是result
    const { success, response, errorResponse, result } = data
    if (success) {
      return response || result
    } else {
      message.error(errorResponse.msg)
      if (errorResponse && errorResponse.code === 9100) {
        window.location.reload()
      }
      return null
    }
  }
  return config
}, err => {
  console.log(err)
  message.error('發生了未知錯誤')
  Promise.reject(err)
})
複製程式碼

操作授權

也是利用高階元件

// 鑑權元件
import { branch, renderNothing } from 'recompose'
const withAuth = branch(
  props => {
    const getAuth = () => {
      return something
    }
    return !getAuth()
  },
  renderNothing
)
export default withAuth
// 呼叫
const AuthBtn = Auth(Button)
<AuthBtn
      {...someProps}
        >
          xxx
        </AuthBtn>
複製程式碼

結語

所以綜上看出可以看出核心都在高階元件,後續我會貼出專案地址, 現在先把核心方法放出來,寫的比較倉促歡迎留言指正。