react登录访问控制--鉴权

这里给出的解决方案是封装一个鉴权路由组件

组件代码

import { hasToken } from '@/utils/storage' // 这里是封装了获取token的函数
import React from 'react'
import { Route, Redirect } from 'react-router-dom'
// 我们需要解构所有的属性，除了component属性
export default function PrivateRoute ({ component, path }) {
  const Component = component
  return (
    <Route
      path={path}
      render={() => {
        if (hasToken()) { // 判断有没有token
          return <Component /> // 有就直接返回原路由组件
        } else {
          return <Redirect to="/login" /> // 没有就重定向到login
        }
      }}
    />
  )
}

在组件中使用:

import React from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
import NotFound from '@/pages/NotFound'
import history from './utils/history'
import PrivateRoute from '@/components/PrivateRoute'

export default function App () {
  console.log(history)
  return (
    <div className="app">
      <Router history={history}>
        <Switch>
          <Route path="/login" component={Login} />
          <PrivateRoute path="/home" component={Layout} />
          {/* 增加一个404 */}
          <Route component={NotFound} />
        </Switch>
      </Router>
    </div>
  )
}