react中没有导航守卫做登录访问控制

访问控制-问题描述

目标

用户必须登录才能访问后台首页，否则不能进入后台主页

背景

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

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

分析

如何实现登录访问控制呢？

思路： 不管哪个页面都是通过路由来访问的，因此，需要从路由角度来进行控制

步骤

创建 AuthRoute 组件，判断是否登录，1 登录直接显示要访问的页面 2 没有登录跳转到登录页面

react中没有导航守卫，需要自己封装

在components目录下，封装中使用AuthRoute 。

使用:App.js目标，实现与Route一样的功能，并做权限控制。

封装在公共组件AuthRoute

//route 里面可以写render函数
import { Route, Redirect } from 'react-router'
import { hasToken } from '@/utils/storage'
export default function AuthRoute (props) {
  console.log(props)
  //接收的组件
  const Com = props.component
  return (
    <Route
    //接收的路径
      path={props.path}
      render={() => {
      //判断如果有token就跳转页面
        if (hasToken()) {
          return <Com />
        } else {
       // 没有就回登录页
          console.log('没有token....')
          return <Redirect to="/login" />
        }
      }}
    />
  )
}