验证邮箱链接

当用户点击邮箱里的链接时，进入到success_verify_email.html页面。

在该页面中，我们将请求网址中用于验证的token发送给后端接口，由后端接口判断token的有效性，如果token有效，则修改邮箱的验证状态，并将处理结果返回给前端展示给用户。

后端接口设计：

请求方式：GET /emails/verification/?token=xxx

请求参数：查询字符串参数

参数	类型	是否必须	说明
token	str	是	用于验证邮箱的token

返回数据： JSON

返回值	类型	是否必须	说明
message	str	是	验证处理结果

在users/views.py 中新建视图

# url(r'^emails/verification/$', views.VerifyEmailView.as_view()),
class VerifyEmailView(APIView):
    """
    邮箱验证
    """
    def get(self, request):
        # 获取token
        token = request.query_params.get('token')
        if not token:
            return Response({'message': '缺少token'}, status=status.HTTP_400_BAD_REQUEST)

        # 验证token
        user = User.check_verify_email_token(token)
        if user is None:
            return Response({'message': '链接信息无效'}, status=status.HTTP_400_BAD_REQUEST)
        else:
            user.email_active = True
            user.save()
            return Response({'message': 'OK'})

在User模型类中定义验证token的方法

    @staticmethod
    def check_verify_email_token(token):
        """
        检查验证邮件的token
        """
        serializer = TJWSSerializer(settings.SECRET_KEY, expires_in=constants.VERIFY_EMAIL_TOKEN_EXPIRES)
        try:
            data = serializer.loads(token)
        except BadData:
            return None
        else:
            email = data.get('email')
            user_id = data.get('user_id')
            try:
                user = User.objects.get(id=user_id, email=email)
            except User.DoesNotExist:
                return None
            else:
                return user

前端

在front_end_pc目录中新建success_verify_email.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-邮箱验证成功</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
    <script type="text/javascript" src="js/host.js"></script>
</head>
<body>
    <div class="find_header">
        <img src="images/logo.png">
        <span class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;邮箱验证成功</span>
    </div>

    <div class="find_form" id="email_result">
        <div v-if="success" class="pass_change_finish">恭喜您，邮箱验证成功！<br/><a href="/index.html">返回主页</a></div>
        <div v-else class="pass_change_finish">链接已失效，验证失败，请重新验证！<br/><a href="/index.html">返回主页</a></div>
    </div>

    <div class="footer no-mp">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>        
        </div>
        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888    京ICP备*******8号</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#email_result',
            data: {
                host,
                success: true
            },
            created: function(){
                axios.get(this.host+'/emails/verification/'+ document.location.search)
                    .then(response => {
                        this.success = true;
                    })
                    .catch(error => {
                        this.success = false;
                    });
            }
        });
    </script>    
</body>
</html>