Django账号登陆之首页用户名展示(首页用户名展示方案、用户名写入到cookie、Vue渲染首页用户名)

首页用户名展示方案

方案一

• 模板中 request 变量直接渲染用户名
• 缺点：不方便做首页静态化

{% if user.is_authenticated %}
    <div class="login_btn fl">
        欢迎您：<em>{{ user.username }}</em>
        <span>|</span>
        <a href="#">退出</a>
    </div>
    {% else %}
    <div class="login_btn fl">
        <a href="login.html">登录</a>
        <span>|</span>
        <a href="register.html">注册</a>
    </div>
{% endif %}

方案二

• 发送ajax请求获取用户信息
• 缺点：需要发送网络请求

<div class="login_btn fl">
    {# ajax渲染 #}
</div>

方案三

• Vue读取cookie渲染用户信息

<div v-if="username" class="login_btn fl">
    欢迎您：<em>[[ username ]]</em>
    <span>|</span>
    <a href="#">退出</a>
</div>
<div v-else class="login_btn fl">
    <a href="login.html">登录</a>
    <span>|</span>
    <a href="register.html">注册</a>
</div>

用户名写入到cookie

# 响应注册结果
response = redirect(reverse('contents:index'))
# 注册时用户名写入到cookie，有效期15天
response.set_cookie('username', user.username, max_age=3600 * 24 * 15)
return response

# 响应登录结果
response = redirect(reverse('contents:index'))
# 登录时用户名写入到cookie，有效期15天
response.set_cookie('username', user.username, max_age=3600 * 24 * 15)
return response

Vue渲染首页用户名

index.html

<div v-if="username" class="login_btn fl">
    欢迎您：<em>[[ username ]]</em>
    <span>|</span>
    <a href="#">退出</a>
</div>
<div v-else class="login_btn fl">
    <a href="login.html">登录</a>
    <span>|</span>
    <a href="register.html">注册</a>
</div>

index.js

mounted(){
    // 获取cookie中的用户名
    this.username = getCookie('username');
},