一般登录权限校验分为两种情况：API 接口校验 和 页面级校验。

1. API 接口校验

API 接口校验一般为在每一次登录的时候，接口都会返回不同的标记来告诉调用者是否已经登录，例如：如果已经登录返回 { code: 0 }，尚未登录返回 { code: -1, message: '尚未登录' } 或者有时候直接通过 401 Unauthorized - HTTP 来表明尚未登录。
这种形式的处理方式其实相对比较简单, 只需要在页面开始的地方做一次接口拦截就行了。下面我就以 401 - status 为例进行说明：

// 1. 在 main.js 里面添加如下代码
phax.interceptors.response(
  () => {},
  (err) => {
    if (err.status === 401) {
      location.href = '/login'
    }
  },
)

这里我的跳转登录使用的是原生的 location 的方式，也可以使用 React 路由跳转 history 进行跳转，使用代码如下：

// 1. 首先执行 npm install history
import { createBrowserHistory } from 'history';
// 如果需要注意如果 history 版本是 v4 的话，需要传递参数 { forceRefresh: true } 要不然只是地址变了，页面依然没有刷新
let history = createBrowserHistory();

history.push('/login');

示例代码，我用的 http 请求库为自己独立封装的一套使用 fetch 进行请求的库 phax

2. 页面级校验

这种方式为每一次进入页面(或者刷新)都需要进行一次登录校验，这个时候需要在路由上下功夫，需要新增一个权限校验的组件，代码如下：

import React from 'react'
import Home from './Home'
import Login from './Login'

function Auth() {
  // 这里我只是做为演示，使用的前端的模式
  // 其实这里可以加上一个调用后台校验的模式，同时也可以作为刷新 token 有效期
  let isCheck = sessionStorage.getItem('check_login')
  
  let $Auth = <div />
  if (isCheck === '1') {
    $Auth = <Home />
  } else {
    $Auth = <Login />
  }

  return (
    <>
      <span />
      {$Auth}
    </>
  )
}

export default Auth

然后将校验组件放到路由里面

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import './App.less'
import Login from './views/Login'
import Auth from './views/Auth'

function App() {
  return (
    <Router basename="/">
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/" component={Auth} />
      </Switch>
    </Router>
  )
}

export default App

其实在 Auth.tsx 里面可以做很多操作。

其实很多时候，我们的权限校验是两种方式都有的，其实两种模式互不冲突，完全可以整合到一起。