星星博客 »  > 

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

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

  • 封装 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

相关文章