Flask登陆后登陆状态及密码的修改和处理

web/templates/common 是统一布局

登录成功后flask框架服务器默认由login.html进入仪表盘页面index.html('/'),该页面的设置在 (web/controllers/user/index.py)，如果想在该仪表盘页面将 用户信息 展示出来，就得想办法先获取到当前用户的登陆状态。

问题1：登录成功后，在仪表盘index.html中如何获取到当前用户的登陆状态？

首先，想法首先得先想到拦截器，登录状态没有则拦截器依旧会对该页面进行拦截，因为服务器并没有获得这个页面的登录状态信息，别说对这个仪表盘index.html有啥操作了，想看该页面都看不到，拦截器在前面拦着呢，去web/interceptors/Authinterceptor.py中写入代码：

@app.before_request
def before_request():

....,


    user_info = check_login()
    g.current_user = None


    if user_info:
        g.current_user = user_info

添加g变量后，通过拦截器使用g变量？import g以后就可以到仪表盘页面index.html中使用g变量了

web/controllers/user/index.py

from flask import Blueprint, render_template, g
route_index = Blueprint('index_page', __name__)

@route_index.route('/')
def index():
    current_user = g.current_user
    return render_template("index/index.html", current_user = current_user)

问题2：拦截器是通过auth.cookie获得auth_cookie后，根据有无正确的auth_cookie值进行拦截的，那为何不直接用auth.cookie来当作用户登陆状态，反而溜达一圈使用g变量呢？这部多此一举吗？

g变量是从user_info赋值的，而user_info又是由auth_cookie.split(#)获得的，使用g变量反而变得轻巧了许多，不用反复对auth_cookie反复split(#)。

另一方面，在拦截器中，我们还对auth.cookie.split(#)所赋值的auth_info 进行了一系列判断

【比如说

1: 是否user_iinfo在我们的数据库模型User中，如果不在则返回False；

2auth_info[0]授权码是否符合我们在 flask框架中定义的授权码UserService.geneAuthCode(user_info)进行判断，如果不符合则返回 False】

由此观之，并不是说拦截器拦截了我们想要的用户登陆状态信息，而是拦截器已经阻拦了我们让它阻拦的，没让它阻拦的它没阻拦，就好比我们的用户登陆状态信息，已经通过拦截器了，是我们没用让用户登陆状态信息显露出来，这就又回到了我们的文章的起点，如何将用户登陆状态信息展示：

接下来，就继续看看编程浪子是怎么样在index.html使用登录状态吧！

问题3：但我发现他并没有第一时间跑到index.html中修改部署current_user信息，为什么呢？

{% extends "common/layout_main.html" %}
{% block content %}
<div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">日统计</span>
                            <h5>营收概况</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">1005.00</h1>
                            <small>近30日：31177.00</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">日统计</span>
                            <h5>订单</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">988</h1>
                            <small>近30日：29383</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">日统计</span>
                            <h5>会员</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">358</h1>
                            <small>今日新增：77</small>
                            <small>近30日新增：2454</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">日统计</span>
                            <h5>分享</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">1250</h1>
                            <small>近30日：45980</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12" id="member_order" style="height: 400px;border: 1px solid #e6e6e6;padding-top: 20px;">
                    使用highchart画图
                </div>
                <div class="col-lg-12" id="finance" style="height: 400px;border: 1px solid #e6e6e6;padding-top: 20px;">
                    使用highchart画图
                </div>
            </div>
        </div>
{% endblock %}

如index.html开始所示：

{% extends "common/layout_main.html" %}
{% block content %}

他跑layout_main.html编辑了，这也是他为什么跑layout_main.html进行编辑的原因。

layout n, 布局、版面设计

web/templates/common/layout_main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <link href="{{ buildStaticUrl('/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ buildStaticUrl('/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
    <link href="{{ buildStaticUrl('/css/style.css') }}" rel="stylesheet">
    {%block css %}{% endblock %}
<body>
<div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="profile-element text-center">
                        <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/logo.png') }}"/>
                        <p class="text-muted">编程浪子</p>
                    </div>
                    <div class="logo-element">
                        <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/logo.png') }}"/>
                    </div>
                </li>
                <li class="default">
                    <a href="{{ buildUrl('/') }}"><i class="fa fa-dashboard fa-lg"></i>
                        <span class="nav-label">仪表盘</span></a>
                </li>
                <li class="account">
                    <a href="{{ buildUrl('/account/index') }}"><i class="fa fa-user fa-lg"></i> <span
                            class="nav-label">账号管理</span></a>
                </li>
                <li class="food">
                    <a href="{{ buildUrl('/food/index') }}"><i class="fa fa-book fa-lg"></i> <span
                            class="nav-label">美餐管理</span></a>
                </li>
                <li class="member">
                    <a href="{{ buildUrl('/member/index') }}"><i class="fa fa-group fa-lg"></i> <span
                            class="nav-label">会员列表</span></a>
                </li>
                <li class="finance">
                    <a href="{{ buildUrl('/finance/index') }}"><i class="fa fa-rmb fa-lg"></i> <span
                            class="nav-label">财务管理</span></a>
                </li>
                <li class="stat">
                    <a href="{{ buildUrl('/stat/index') }}"><i class="fa fa-bar-chart fa-lg"></i> <span
                            class="nav-label">统计管理</span></a>
                </li>
            </ul>

        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg" style="background-color: #ffffff;">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="javascript:void(0);"><i class="fa fa-bars"></i> </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
						<span class="m-r-sm text-muted welcome-message">
                            欢迎使用编程浪子订餐管理管理后台
                        </span>
                    </li>
                    <li class="dropdown user_info">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                            <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/avatar.png') }}"/>
                        </a>
                        <ul class="dropdown-menu dropdown-messages">
                            <li>
                                <div class="dropdown-messages-box">
                                    姓名：{{ current_user.nickname }} <a href="{{ buildUrl('/user/edit') }}" class="pull-right">编辑</a>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="dropdown-messages-box">
                                    手机号码: {{ current_user.mobile }}
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="link-block text-center">
                                    <a class="pull-left" href="{{ buildUrl('/user/reset-pwd') }}">
                                        <i class="fa fa-lock"></i> 修改密码
                                    </a>
                                    <a class="pull-right" href="{{ buildUrl('/user/logout') }}">
                                        <i class="fa fa-sign-out"></i> 退出
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>

            </nav>
        </div>
        {% block content %}{% endblock %}
    </div>
</div>

<script src="{{ buildStaticUrl('/plugins/jquery-2.1.1.js') }}"></script>
<script src="{{ buildStaticUrl('/bootstrap/bootstrap.min.js') }}"></script>
<script src="{{ buildStaticUrl('/plugins/layer/layer.js') }}"></script>
<script src="{{ buildStaticUrl('/js/common.js') }}"></script>
{%block js %}{% endblock %}
</body>
</html>

通过在父模板layout_main.html 中通过{{ current_user.nickname }} 和 {{ current_user.mobile }}获取到了登录状态信息。

值得一提的是，在current在flask框架index.py中return时,

from flask import Blueprint, render_template, g
route_index = Blueprint('index_page', __name__)

@route_index.route('/')
def index():
    current_user = g.current_user
    return render_template("index/index.html", current_user = current_user)

他只是在子模版中return了一下current_user的值。这样用户登陆状态信息就成功地在index.html页面展示出来了！

伴随着学习的进步，更多的问题就浮现出来了。index.html页面可以展示用户登陆状态信息，但是其他的页面edit、food 等页面还没有展示用户登陆状态信息，这就需要去一一展示用户登录状态信息。就是因为嫌弃一一展示麻烦，所以当然可以统一写一下代码整体展示用户登陆状态信息。

接下来就是编程浪子老师教如何将统一布局里面的变量g 通过统一传递的方式而不需要每个controller里进行操作。

在web/controllers/user/User.py 中 index 和edit这些return里都有render_templater()方法进行渲染页面：

route_user = Blueprint('user_page', __name__)

@route_user.route('/login', methods = ['GET', 'POST'])
def login():
    if request.method =="GET":
        if g.current_user:
            return  redirect( UrlManager.buildUrl("/") )
        return render_template("user/login.html")
       
    ...,

    return response

@route_user.route('/edit')
def edit():
    return render_template('user/edit.html')

@route_user.route('/reset.pwd')
def resetPwd():
    return render_template('user/reset_pwd.html')

如果将统一渲染模板的这个render_template()方法统一包装一层，然后将这个统一的g变量传进去，不就可以展示了吗？

common/libs/user/Helper.py

ops 表示惊讶!

from flask import g

'''
统一渲染方法
'''
def ops_render( template,context = {} ):
    if 'current_user' in g:
        context['current_user'] = g.current_user
    return render_template( template,**context )

这段Flask代码是一个用于统一渲染模板的方法。它接受两个参数：template和context。其中，template是要渲染的模板文件名，context上下文是一个字典，包含要传递给模板的数据。

在方法内部，首先判断当前用户是否存在于全局变量g中。如果存在，将当前用户添加到context字典中的current_user键中。

然后，使用render_template方法来渲染模板。render_template方法是Flask框架提供的一个函数，用于渲染模板文件并返回渲染后的HTML内容。它接受两个参数：模板文件名和要传递给模板的数据。在这里，我们使用 **context 来将 context字典中的所有键值对作为参数传递给render_template方法。

最后，将渲染后的HTML内容作为方法的返回值。

这段代码的作用是将当前用户添加到模板的上下文中，并渲染指定的模板文件。通过这个方法，我们可以在多个视图函数中使用同样的渲染逻辑，避免重复的代码。

设置完ops_render()方法后，就是使用ops_render()方法来实现我们所谓的模板渲染+当前用户信息的双重功能了

返回Flask服务器框架web/controllers/user/User.py

from common.libs.Helper import ops_render

route_user = Blueprint('user_page', __name__)

@route_user.route('/edit')
def edit():
    return ops_render('user/edit.html')

@route_user.route('/reset.pwd')
def resetPwd():
    return ops_render('user/reset_pwd.html')

总结一下ops_render()就是一个大套娃=1个小套娃+1个小工具

使用Pycharm的Ctrl+r统一替换将render_template 替换为ops_render