手把手带你做一个react

做一个react"/>

手把手带你做一个react

我们先创建一个react项目 然后 引入路由

npm install react-router-dom --save

然后在src下创建一个文件夹 叫 components
在components下创建两个组件
index.jsx 参考代码如下

import React from "react";
import {useNavigate,
} from "react-router-dom";const Index = () =>{const navigate = useNavigate()const fallback = () => {navigate("/login")}return (<div>欢迎来到本系统<div onClick={() => fallback()}>点击登录</div></div>)
}export default Index;

index作为首页 可以点击进行登录

在 components 下创建组件 叫 login.jsx 参考代码如下

import React from "react";
import {useNavigate
} from "react-router-dom";const Loginmint = () =>{const navigate = useNavigate()const register = () => {localStorage.setItem("token","rem432412341324");navigate("/")}return (<div><div onClick={() => register()}>登录</div></div>)
}export default Loginmint;

这个login组件就用来完成登录逻辑 因为我不想搞的太复杂 就直接搞成他点一下 就直接给他一个token表示它登录过了吧

然后 我们在components再创建一个组件 叫 news.jsx 参考代码如下

import React from "react";
import {useNavigate,
} from "react-router-dom";const News = () =>{const navigate = useNavigate()const logOff = () => {localStorage.setItem("token","");localStorage.removeItem("token"); navigate("/")}return (<div><div onClick={() => logOff()}>注销</div></div>)
}export default News;

这个界面主要就是做那个登录成功才能访问的界面 且可以注销登录 因为我们登录时 只是在缓存里面加了一个token的缓存 注销自然就是将这个缓存给他干掉

然后 我们在src下创建目录 叫 router 下面创建一个组件叫 index.jsx 参考代码如下

import React from "react";
import { Routes,Route } from "react-router-dom";
import Index from "../components/index";
import Login from "../components/login";
import News from "../components/news";export default class AppRouter extends React.Component{constructor(props){super(props);this.state = {}}render(){const IndexReturn = ()=><div><Index/></div>const LoginReturn = ()=><div><Login/></div>const NewsReturn = ()=><div><News/></div>return (<div><Routes><Route path='/' element = { IndexReturn() }></Route></Routes><Routes><Route path='/login' element = { LoginReturn() }></Route></Routes><Routes><Route path='/News' element = { NewsReturn() }></Route></Routes></div>)}
}

这个组件引入了我们上面写的三个组件 他将被当做我们的路由配置来使用

然后 在src下的 App.js 根组件中编写代码如下

import './App.css';
import React from "react";
import GetRouter from "./router/index";
import { BrowserRouter } from "react-router-dom";
export default class App extends React.Component{constructor(props){super(props);this.state = {}}render(){return (<div><BrowserRouter><GetRouter/></BrowserRouter></div>)}
}

引入并挂载一下路由组件
运行结果如下

我们点一下 点击登录

确实是到了登录界面 这个逻辑是没错的
但如果我们直接修改界面导航地址
在后面拼上一个 /News

我们就会发现 虽然我们并没有登录 但 这样还是可以直接访问到 注销界面 那么安全性肯定是大问题的

下面 我们就来做这个的控制 在router目录下创建 routeGuard.jsx组件
参考代码如下

import { Navigate,useLocation } from "react-router-dom";const RouteGuard = (props)=> {const WhiteList = ["/","/login"];const { pathname } = useLocation()if(WhiteList.indexOf((pathname?pathname:"/")) === -1){let token = localStorage.getItem("token","rem432412341324");if(token){return props.children;}else{return <Navigate to = "/login" />;}}else{return props.children;}
}export default RouteGuard

WhiteList 相当于设置了一个白名单 调整白名单数组中的路由 是不需要登录的 否则 其他路由 就要进去判断 第二次判断就是判断当前用户有没有token 如果有 则直接返回当前路由对象
如果没有 直接返回Navigate 重定向 指向 /login 登录路由组件的路径useLocation是在获取当前路由 然后进去和白名单做判断 看看白名单里面包不包括当前路由

然后更改App.js代码如下

import './App.css';
import React from "react";
import GetRouter from "./router/index";
import RouteGuard from "./router/routeGuard"
import { BrowserRouter } from "react-router-dom";
export default class App extends React.Component{constructor(props){super(props);this.state = {}}render(){return (<div><BrowserRouter><RouteGuard><GetRouter/></RouteGuard></BrowserRouter></div>)}
}

将路由组件 GetRouter 装在了RouteGuard守卫组件里面

然后我们这就访问项目

然后还是在地址栏上手动拼接/News试试

当我们按下回车确定

可以看到 就直接被踢到登录这里了 然后我们点击登录
就会到了首页 但点登录之后 我们就已经生成这个token的缓存了 条件是达到了的

然后我们再拼接一次/News试试

因为这次我们是有token的 所以就访问成功了

那么 你学废了吗？