react 的访问权限控制(没有token是不应该出现从url 中修改地址短暂跳转到登录之后的页面中的情况)

• 有的页面不需要登录就可以访问，比如，登录页
• 有的页面需要登录后才能访问，比如，项目后台首页、内容管理等（除了登录页面，其他页面需要登录才能访问)

因此，就需要对项目进行登录访问控制，让需要登录才能访问的页面，必须在登录后才能访问。 在没有登录时，直接跳转到登录页面，让用户进行登录。

在vue 中我们可以使用路由守卫来实现这个功能,而 react 中并没有路由守卫这个概念,这就需要我们自己手写代码来实现这个功能的组件封装

react-router-dom 文档中提供的鉴权示例

React Router: Declarative Routing for React.js

当点击 PublicPage 时 ,Public 成功出现

而当我们点击Protected Page 时 ,出现 You must log in to view the page at /protected 提示,并且内容没有出现, 并提示我们登录

根据提示点击登录按钮成功进入  Protected 页面

 查看代码发现有如下代码 我们发现有 render 

掌握Route中的render的使用

    Route的上使用render格式 :

Route的作用是当path匹配成功时，加载显示对应的组件

<Route path="/login" component={组件}>

或者

<Route path="/login" render={() => { return <组件/>} }>

使用箭头函数返回任意的结构

render的基本使用

<Route path="/home" render={()=>{
  const token = getToken()
  if(token) {
    return <Layout></Layout>
  } else {
    return <Redirect to="/login"><Redirect>
  }
}

当我们在App.js 写如下代码:

 我们在url中 输入/home2 也成功进入Layout 页面

书写react 的访问权限控制

这两种写法都可以正常跳转到 Layout 页面

 但第二种render写法是一个函数,我们可以在里面写一些逻辑判断

 这样一写就实现了访问权限控制的功能

封装一个权限控制

上面的写法不方便复用,我们可以封装一个访问权限控制

在 components(公共组件文件夹) 文件中创建一个AuthRoute.js 文件

代码如下:

/* eslint-disable react/prop-types */
import { hasToken } from '@/utils/storage'
import { Route, Redirect } from 'react-router'

// 使用props 接收值
export default function AuthRoute (props) {
  const Com = props.component
  return (
    <Route
      // path 设一个活的值 ,使用 props 接收
      path={props.path}
      render={() => {
        if (hasToken()) {
          // 组件标签使用一个常量进行接收 不能直接写 <props.component/>
          return <Com />
        } else {
          alert('没有登录,不能访问')
          return <Redirect to="/login" />
        }
      }}
    />
  )
}

在 App.js 中导入  AuthRoute.js 并按如下写法

import AuthRoute from './components/AuthRoute'

实现效果

当把 ' /home' 路径 也用<AuthRoute/> 包起来后

 url路径修改home也不会出现短暂进入 Layout 页面的情况