路由权限控制——封装通用组件实现路由权限过滤-验证能否实现页面的登录访问控制

• 封装 AuthRoute 鉴权路由组件
  • 在 components 目录中创建 AuthRoute/index.js 文件。
  • 创建组件 AuthRoute 并导出。
  • 在 AuthRoute 组件中返回 Route 组件（在 Route - 基础上做了一层包装，用于实现自定义功能）。
  • 给 Route 组件，添加 render 方法，指定该组件要渲染的内容（类似于 component 属性）。
  • 在 render 方法中，调用 isAuth() 判断是否登录。
  • 如果登录了，就渲染当前组件（通过参数 component 获取到要渲染的组件，需要重命名）。
  • 如果没有登录，就重定向到登录页面，并且指定登录成功后要跳转到的页面路径。
  • 将 AuthRoute 组件接收到的 props 原样传递给 Route 组件（保证与 Route - 组件使用方式相同）。
  • 使用 AuthRoute 组件配置路由规则，验证能否实现页面的登录访问控制。

/*
  封装通用组件实现路由权限过滤
*/
import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { getToken } from '../../utils/token'

const AuthCheck = (props) => {
  const { path, component: Component } = props
  // 只要登录成功后才可以正常访问相应的组件
  // 如果没有登录，那么就重定向到登录页
  let result = <Component/>
  let isLogin = getToken()
  if (!isLogin) {
    // 没有登录成功,重定向到登录页
    result = <Redirect to='/login'/>
  }
  return (
    <Route path={path} render={() => {
      return result
    }}/>
  )
}
export default AuthCheck

实例

src/components/AuthCheck/index.js

/*
  封装一个通用组件验证所有的路由权限
*/
import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { token } from '../../utils/index.js'

class AuthCheck extends React.Component {
  render () {
    // 从<AuthCheck/>组件属性中获取的值
    // componet需要重命名，组件首字母必须大写
    let { path, component: Component } = this.props
    // 这里可以控制路由权限
    let content = <Component/>
    // 判断用户是否登录
    if (!token.getToken()) {
      // 没有登录，重定向到登录页面
      content = <Redirect to='/login'/>
    }
    return (
      <Route path={path} render={() => {
        return content
      }}/>
    )
  }
}

export default AuthCheck