一般登录权限校验分为两种情况：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 里面可以做很多操作。
其实很多时候，我们的权限校验是两种方式都有的，其实两种模式互不冲突，完全可以整合到一起。
