实战react技术栈+express前后端博客项目（6）-- 使用session实现免登陆+管理后台权限验证...

最新推荐文章于 2024-06-13 09:59:26 发布
最新推荐文章于 2024-06-13 09:59:26 发布
阅读量873 收藏 2
点赞数 1
文章标签： javascript 前端 后端 ViewUI
原文链接：https://juejin.im/post/59e05310f265da43052da1e7
版权

项目地址：github.com/Nealyang/Re…

本想等项目做完再连载一波系列博客，随着开发的进行，也是的确遇到了不少坑，请教了不少人。遂想，何不一边记录踩坑，一边分享收获呢。分享当然是好的，
如果能做到集思广益，那岂不是更美。我们的口号是：坚决不会烂尾

本博客为连载代码博客同步更新博客，随着项目往后开发可能会遇到前面写的不合适的地方会再回头修改。如有不妥~欢迎兄弟们不啬赐教。谢谢！

session

后端部分

上一篇文章中，我们已经实现了前后端的登录功能。问题大家可能都已经发现了，当刷新页面的时候，之前登录过的现在得重新登录。显然，这个并不是我们想想要的。

所以这里我们采用session的机制来解决这类问题。不了session和coolie可以参考我这篇博客。

apiServer.js

app.use(cookieParser('express_react_cookie'));
app.use(session({
    secret:'express_react_cookie',
    resave: true,
    saveUninitialized:true,
    cookie: {maxAge: 60 * 1000 * 30}//过期时间
}));复制代码

因为是登录信息，所以这里我们采用的是session。首先需要在apiServer.js中引入cookie-parser和express-session中间件。

coolieParser里面设置一个key，必须要和session中一致。然后设置coolie的过期时间。这里我们设置为30min。

然后再用户登录成功了以后，我们需要设置session

router.post('/login', (req, res) => {
    let {username, password} = req.body;
    if (!username) {
        responseClient(res, 400, 2, '用户名不可为空');
        return;
    }
    if (!password) {
        responseClient(res, 400, 2, '密码不可为空');
        return;
    }
    User.findOne({
        username,
        password: md5(password + MD5_SUFFIX)
    }).then(userInfo => {
        if (userInfo) {
            //登录成功
            let data = {};
            data.username = userInfo.username;
            data.userType = userInfo.type;
            data.userId = userInfo._id;
            //登录成功后设置session
            req.session.userInfo = data;

            responseClient(res, 200, 0, '登录成功', data);
            return;
        }
        responseClient(res, 400, 1, '用户名密码错误');

    }).catch(err => {
        responseClient(res);
    })
});复制代码

其中，
req.session.userInfo = data即为设置session的userInfo。

然后再server端需要另写一个接口。在用户打开网站的时候就发起请求，验证用户是否已经登录。

//用户验证
router.get('/userInfo',function (req,res) {
    if(req.session.userInfo){
        responseClient(res,200,0,'',req.session.userInfo)
    }else{
        responseClient(res,200,1,'请重新登录',req.session.userInfo)
    }
});复制代码

很简单，就是将请求中的req.session.userInfo的信息返回过去。这样，当用户访问网站的时候，先发送这个请求，来判断用户知否已经登陆过。如果已经登陆过，拿到这个userInfo直接put一个action到reducer中，修改state状态树即可。

前端部分

前端部分比较常规。在最外层的container中，直接发送请求即可

class AppIndex extends Component {

    constructor(props) {
        super(props);
        this.openNotification = this.openNotification.bind(this);
        this.shouldComponentUpdate = PureRenderMixiin.shouldComponentUpdate.bind(this);
    }

    openNotification(type, message) {
        let that = this;
        notification[type]({
            message: message,
            onClose: () => {
                that.props.clear_msg();
            }
        });
        that.props.clear_msg();
    };

    render() {
        let {isFetching} = this.props;
        return (
            <Router>
                <div>
                    <Switch>
                        <Route path='/404' component={NotFound}/>
                        <Route path='/admin' component={Admin}/>
                        <Route component={Front}/>
                    </Switch>
                    {isFetching && <Loading/>}
                    {this.props.notification && this.props.notification.content ?
                        (this.props.notification.type === 1 ?
                            this.openNotification('success', this.props.notification.content) :
                            this.openNotification('error', this.props.notification.content)) :
                        null}
                </div>
            </Router>
        )
    }

    componentDidMount() {
        this.props.user_auth();
    }

}复制代码

然后对应saga的处理也比较常规，这里不再赘述。

权限认证

因为是博客系统，所以所谓的权限就是判断改登录用户是否为管理员。我们在设计user表的时候，添加了身份一项。当然，咱可以随意用别的字符来标识管理员和普通用户。

 render() {
        const {url} = this.props.match;
        if(this.props.userInfo.userType){
            return (
                <div>
                    {
                        this.props.userInfo.userType === 'admin' ?
                            <div className={style.container}>
                                <div className={style.menuContainer}>
                                    <AdminMenu history={this.props.history}
                                               url={this.props.adminUrl}
                                               changeUrl={this.props.change_location_admin}/>
                                </div>
                                <div className={style.contentContainer}>
                                    <Switch>
                                        <Route exact path={url} component={AdminIndex}/>
                                        <Route path={`${url}/managerUser`} component={AdminManagerUser}/>
                                        <Route path={`${url}/managerTags`} component={AdminManagerTags}/>
                                        <Route path={`${url}/newArticle`} component={AdminNewArticle}/>
                                        <Route path={`${url}/detail`} component={Detail}/>
                                        <Route component={NotFound}/>
                                    </Switch>
                                </div>
                            </div> :
                            <Redirect to='/'/>
                    }
                </div>
            )
        }else{
            return <NotFound/>
        }
    }复制代码

在admin.js中，我们判断state中是否有userInfo这个选项。


如果userInfo是有值的，那么说明已经登录。如果没有值，则跳转到NotFound页面。

为什么先显示notFound界面，而不是在userInfo为空的时候直接Redirect？

这里有个大坑，具体看我segmentFault上的提问：react redux身份验证，取state的问题

以上即为admin的权限认证，如上，当admin登录到管理后天的时候，既可以到管理界面，当不是admin登录到管理后台的时候，会直接Redirect到博客首页。

总结

如上，我们就直线了用户的免登陆以及权限管理的问题。主要就是通过session和状态树的判断。
下一篇，我们就开始后端部分的开发~

项目实现步骤系列博客

欢迎兄弟们加入：

Node.js技术交流群：209530601

React技术栈：398240621

前端技术杂谈：604953717 (新建)

react-session:一个简单的对象，用于在React应用程序中管理客户端会话数据
05-13
React会话 一个简单的对象，用于在React应用程序中管理客户端会话数据。 这与服务器端会话不同步。 安装 npm install react - client - session -- save 用法 一个简单的例子。 下载并运行该演示以获取更多示例，或在浏览。 在基本应用程序中设置存储类型，然后创建一个键值对...，例如username 。 支持的存储类型为memory ， cookie ， localStorage和sessionStorage 。 注意：使用cookie存储类型时，所有通过ReactSession.set(key, value);设置的键值对ReactSession.set(key, value); 被作为JSON序列化到一个名为__react_session_<DOMAIN>单个cookie中 import React from 'react' ;
React 登录态的简单实现
qq_42638586的博客
12-13 1971
问题描述：刚开始学习React ，项目需要有一个登录界面，实现登录功能。第一想法当然是在仓库（redux的reducer中）中创建一个islogin字段标识登录状态（默认为fasle）。但是在调试过程中，登录成功之后，显示到其他界面，刷新就会直接跳转到登录界面。 原因：因为界面刷新之后会重置静态资源。（或者说你的react项目的仓库中的那些默认值都要被重置，比如那个islogin字段...
express-session通过设置req.session.userInfo之后获取失败
qq_44688392的博客
07-05 1648
express-session通过设置req.session.userInfo之后获取失败 需要登录权限的时候就出问题了，node在登录后回将session保存在req.session.user上，在后面需要权限的时候去取出来验证，如果有req.session.user则通过验证，如果没有则提示登录。我在登录后能正确提示成功，但是到需要验证的功能上还是不能通过权限验证，通过google发现，在请求的时候没有带cookies，所以服务器不能认为你是一个已经登录的用户。以上是原因。 解决方法：在Vue项目的ma
关于react打包与koa设置session问题
ruby_xc的博客
03-07 535
这两天写到权限验证的问题, 第一次写koa, 关于session的问题, 在登录时已经设置过session了, 然后在其他controller里面读取session的时候一直为空, 原因是请求时设置如下: 默认情况下，fetch不会从服务端发送或接收任何cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置credentials...
react登录跳转2种方式
tools2016的博客
04-17 6164
第一种方式，在页面中跳转：切记引入 import { routerRedux } from 'dva/router';// 登录 handleSubmit = (err, values) =&gt; { let dt = hex_md5(values.password); console.log("dt="+dt); if (!err) { this.props.dispatch({ ...
react+express+mongodb搭建的yoho-be后台管理系统.zip
08-03
在本项目中，"react+express+mongodb搭建的yoho-be后台管理系统.zip"是一个基于现代Web技术栈构建的后台管理系统的实例。这个系统利用了React作为前端框架，Express作为后端框架，以及MongoDB作为数据库存储，展示了...
基于React+SpringBoot的前后端分离项目-校园社交平台.zip
最新发布
07-27
本项目技术栈包括React、Spring Boot等，是一个前后端分离项目。 主要功能： 用户登录、注册、退出登录 发布动态、游览动态、点赞动态 修改个人信息 用户管理（管理员） 查询所有用户 修改用户信息 添加用户 删除...
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass
03-06
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 react：...
基于React.js和Ant Design实现的博客管理后台项目源码+项目说明.zip
12-10
【资源介绍】基于React.js和Ant Design实现的博客管理后台项目源码+项目说明.zip一个基于 React.js 完整的管理后台，包含登录权限，文章管理，分类管理，用户管理，评论管理，回复管理模块- 技术栈：React.js, Reack...
基于react+redux+antd+express+mongoDB的博客前后端搭建系统....zip
08-01
基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！ 基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，...
React实现7天免登录
y_l33的博客
01-16 157
7天免登录
前后端分离项目session的处理(shiro+react)
猿in
04-24 3111
参考: https://blog.csdn.net/woshiyeguiren/article/details/79194003 [spingmvc + ajax] 前端所有请求使用fetch提交: https://blog.51cto.com/zhuxianzhong/2125523?utm_source=oschina-app 注意:要改为确保浏览器不在请求中包含凭据，请使用credentia...
使用React进行数据持久化和会话
代码教主
06-11 1404
拥有“记住我”功能是非常有用的功能，并且使用React和Express实施相对容易。 从建立WebRTC聊天应用程序的最后一部分继续，现在我们将添加Mongo支持的持久会话和数据库支持的在线用户列表，以达到良好的效果。 会议？ 如果您以前从未使用过会话，那么简而言之，它们与cookie十分相似，因为这些会话使您可以实时跟踪应用程序的活动用户。 会话实际上是通过session cookie工...
React配合axios请求拦截校验session，403跳转至登陆页面
见贤思齐焉，见不贤内自省
01-19 7313
这个在Vue中很简单的就解决了，直接引入router，然后router.push，但是在React中，我们要使用props.history.push进行跳转，但是怎么在axios.js中拿到props呢？又是个问题。
开启你的无缝会话管理之旅 - Redux React Session 探秘
gitblog_00065的博客
06-13 441
???? 开启你的无缝会话管理之旅 - Redux React Session 探秘 去发现同类优质开源项目:https://gitcode.com/ 在现代Web开发中，状态管理和用户会话的持久化是两个不可或缺的关键部分，尤其是在构建复杂的SPA（单页应用）时更是如此。今天，我要向大家介绍一款强大的开源库——Redux React Session，它能够将这两个关键功能结合得恰到好处。 ✨ 项目介绍 ...
Express全系列教程之(八)：session的基本使用
no10086的博客
04-27 499
一、关于session session是另一种记录客户状态的机制，与cookie保存在客户端浏览器不同，session保存在服务器当中； 当客户端访问服务器时，服务器会生成一个session对象，对象中保存的是key:value值，同时服务器会将key传回给客户端的cookie当中；当用户第二次访问服务器时，就会把cookie当中的key传回到服务器中，最后服务器会吧value值返回给客户端。 因...
react实现登录判断
weixin_66262936的博客
01-28 1854
实现登录判断
react 判断是否登录，路由进行重定向
大灰狼的小绵羊哥哥的博客
03-20 2161
判断用户是否登录，从而进行路由的重定向。 创建文件 “./component/AuthRoute/index.js” 导入 import React, {useContext, createContext, useState} from "react"; import { BrowserRouter as Router, Switch, Route, Link, //Redirect重定向组件 Redirect, useHistory,
使用TypeScript+React+react-dropzone+Express实现图片上传
本文将通过React、react-dropzone库以及node.js（搭配express.js）来演示如何实现图片上传功能，采用typescript进行开发。 在构建一个使用React、react-dropzone和node.js的图片上传系统时，首先需要进行项目的基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值