Django-Vue搭建个人博客：用户登录

10788 views, 2023/10/16 updated Go to Comments

上一章做好了用户注册，本章来完成用户登录功能。

由于后端的认证方式为 JWT 认证，即后端返回给前端一个 token，前端在请求的 Header 中附带此 token 令牌来证明身份。这就有个不可避免的问题：token 保存在前端的什么地方？

本教程将采用 token 保存在 localStorage 中，实现登录功能。

此问题有广泛的讨论，因为 token 无论是保存在 localStorage、sessionStorage 或者 cookie 中均存在某些情况下被盗取的可能。网络安全不是本教程重点关注的问题，因此为了入门平滑将 token 保存于 localStorage 中，更深入的对安全的讨论请见 HASURA、MDN以及Stackoverflow。有关 localStorage 的入门讲解看这里。

准备工作

为了便于测试，修改后端 setting.py 配置，将 token 的过期时间设置短一些：

# drf_vue_blog

...
SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=1),
    ...
}

登录页面

上一章写 Login.vue 时已经给登录的表单留好了位置，修改对应位置的代码：

<!-- frontend/src/views/Login.vue -->

<template>
    ...
    <div id="grid">
        ...

        <div id="signin">
            <h3>登录账号</h3>
            <form>
                <div class="form-elem">
                    <span>账号：</span>
                    <input v-model="signinName" type="text" placeholder="输入用户名">
                </div>

                <div class="form-elem">
                    <span>密码：</span>
                    <input v-model="signinPwd" type="password" placeholder="输入密码">
                </div>

                <div class="form-elem">
                    <button v-on:click.prevent="signin">登录</button>
                </div>
            </form>
        </div>
    </div>
    ...
</template>

<script>
    ...
    export default {
        name: ...,
        components: {...},
        data: function () {
            return {
                ...
                signinName: '',
                signinPwd: '',
            }
        },
        methods: {
            signup() {...},
            signin() {
                const that = this;
                axios
                    .post('/api/token/', {
                        username: that.signinName,
                        password: that.signinPwd,
                    })
                    .then(function (response) {
                        const storage = localStorage;
                        // Date.parse(...) 返回1970年1月1日UTC以来的毫秒数
                        // Token 被设置为1分钟，因此这里加上60000毫秒
                        const expiredTime = Date.parse(response.headers.date) + 60000;
                          // 设置 localStorage
                        storage.setItem('access.myblog', response.data.access);
                        storage.setItem('refresh.myblog', response.data.refresh);
                        storage.setItem('expiredTime.myblog', expiredTime);
                        storage.setItem('username.myblog', that.signinName);
                        // 路由跳转
                        // 登录成功后回到博客首页
                        that.$router.push({name: 'Home'});
                    })
                    // 读者自行补充错误处理
                    // .catch(...)
            },
        }
    }
</script>

<style scoped>
    #signin {
        text-align: center;
    }
    ...
</style>

回顾一下向后端请求 token 的返回值：

{
    "refresh": "eyJ0eXA...nHbY",
    "access": "eyJ0eXAi...G0Uk"
}

access 是真正用于用户身份认证的令牌。但此令牌有效时间通常比较短（安全考虑），过期后可用 refresh 令牌重新获得一个令牌。

再回过头来看这个登录用的 signin() 方法，它首先发送请求申请 token，成功后则把令牌、过期时间和用户名一并保存到 localStorage 中供后续使用，并将跳转到首页。

expiredTime 为1970年1月1日至过期时间的毫秒数，60000 即代表1分钟；此数值需要与令牌有效期保持一致。

显示登录状态

为了让用户在任意页面都知道自己是否处于登录状态，登录显示一般位于页眉中。

修改 BlogHeader.vue 如下：

<!-- frontend/src/compnents/Blogheader.vue -->

<template>
    <div id="header">
        ...
        <hr>
        <div class="login">
            <div v-if="hasLogin">
                欢迎, {{username}}!
            </div>
            <div v-else>
                <router-link to="/login" class="login-link">登录</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: ...,
        data: function () {
            return {
                searchText: '',
                username: '',
                hasLogin: false,
            }
        },
        methods: {...},
        mounted() {
            const that = this;
            const storage = localStorage;
            // 过期时间
            const expiredTime = Number(storage.getItem('expiredTime.myblog'));
            // 当前时间
            const current = (new Date()).getTime();
            // 刷新令牌
            const refreshToken = storage.getItem('refresh.myblog');
            // 用户名
            that.username = storage.getItem('username.myblog');

            // 初始 token 未过期
            if (expiredTime > current) {
                that.hasLogin = true;
            }
            // 初始 token 过期
            // 如果有刷新令牌则申请新的token
            else if (refreshToken !== null) {
                axios
                    .post('/api/token/refresh/', {
                        refresh: refreshToken,
                    })
                    .then(function (response) {
                        const nextExpiredTime = Date.parse(response.headers.date) + 60000;

                        storage.setItem('access.myblog', response.data.access);
                        storage.setItem('expiredTime.myblog', nextExpiredTime);
                        storage.removeItem('refresh.myblog');

                        that.hasLogin = true;
                    })
                    .catch(function () {
                        // .clear() 清空当前域名下所有的值
                        // 慎用
                        storage.clear();
                        that.hasLogin = false;
                    })
            }
            // 无任何有效 token
            else {
                storage.clear();
                that.hasLogin = false;
            }
        }
    }
</script>

...