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

时间  2019-12-20
标签 实战 react 技术 express 后端 博客 项目 使用 session 实现 登录 管理 后台 权限 验证 栏目 React 繁體版
原文   原文链接

项目地址：https://github.com/Nealyang/R...前端

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

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

session

后端部分

上一篇文章中，咱们已经实现了先后端的登陆功能。问题你们可能都已经发现了，当刷新页面的时候，以前登陆过的如今得从新登陆。显然，这个并非咱们想一想要的。github

因此这里咱们采用session的机制来解决这类问题。不了session和coolie能够参考我这篇博客。express

apiServer.jsredux

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中间件。segmentfault

coolieParser里面设置一个key，必需要和session中一致。而后设置coolie的过时时间。这里咱们设置为30min。后端

而后再用户登陆成功了之后，咱们须要设置sessionapi

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和状态树的判断。
下一篇，咱们就开始后端部分的开发~

## 项目实现步骤系列博客

## 交流

假若有哪里说的不是很明白，或者有什么须要与我交流，欢迎各位提issue。或者加群联系我~

扫码关注个人我的微信公众号，直接回复，必有回应。分享更多原创文章。点击交流学习加我微信、qq群。一块儿学习，一块儿进步

---

欢迎兄弟们加入：

Node.js技术交流群：209530601

React技术栈：398240621

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

---

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程