react登录访问控制--鉴权

最新推荐文章于 2025-08-09 21:59:17 发布

原创最新推荐文章于 2025-08-09 21:59:17 发布 · 1.0k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在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>
  )
}