Go1.20＋React18 如何实现前后端分离的注销和登录校验功能？

大家好，我是张大鹏，今天又来给大家分享技术文章了。

今天咱们继续来分享一些前后端分离权限管理系统的一些技术细节，主要是如何实现登录校验功能和注销功能。

登录校验功能，指的是如果用户没有登录的话，那么就自动跳转到登录界面。注销功能，指的是清除用户的登录信息，然后跳转到登录界面。

从功能描述里面大家应该也能看出来，这里有一个很关键的技术，那就是如何跳转页面。

在React18中，推荐使用ReactRouter作为路由管理工具，我们的权限管理系统采用的也是ReactRouter。这个框架要实现 路由跳转，需要遵循三个步骤：

- 第一步：引入钩子

- 第二步：使用钩子创建导航对象

- 第三步：使用导航对象跳转

引入钩子的代码如下：

import {Outlet, useNavigate} from "react-router-dom";

创建导航对象的代码如下：

const navigate = useNavigate()

使用导航对象跳转的代码如下：

navigate("/login")

有了这个技术底子以后，我们要实现登录校验功能就简单来，核心代码如下：

关于如何实现退出登录功能，这个还有一些必要的技术细节咱们需要了解一下。

在咱们的权限管理系统中，采用的是AntDesign这个框架作为UI界面，顶部的导航菜单采用的是Menu这个组件。这个组件有一个onSelect事件，当点击菜单中的内容的时候，会被自动触发。

我们可以在菜单组件中添加对应的事件监听：

然后编写对应的监听方法：

在方法的内部，我们使用switch监听用户点击了哪个按钮：

当我们捕获到用户点击了注销登录的按钮的时候，让其执行对应的用户注销逻辑：

这样的话，注销功能也就完成了，整体看下来是不是比较简单呢？

本套权限管理系统采用Go1.20+React18进行前后端分离的开发。

后端代码如下：

前端代码如下：

另外，如果您经济方面没有压力的话，更推荐您进行一对一的学习。会有一对一的指导教学，有问题也是一对一的辅导，包教会。无论是自己学，还是给自己的小孩儿报名都是可以的哈。

今天的分享就到这里了，谢谢大家~