一、前端点击修改密码,跳转到邮箱修改界面,输入邮箱传到后端
1、点击修改 进行跳转
<template>
<button @click="goto">忘记密码</button>
</template>
methods: {
goto(){
this.$router.push('/email')
},
2、输入邮箱传到后端
<template>
<h1>请输入邮箱</h1>
邮箱:<input type="text" v-model="data" /><br />
<button @click="get_email">提交</button>
</template>
<script>
import Axios from 'axios'
export default {
data() {
return {
data: "",
};
},
methods: {
get_email() {
Axios.post("users/get_email/", {
email: this.data,
})
.then((resp) => {
console.log("2222222", resp.data);
this.$router.push(resp.data)
alert('请到qq邮箱中修改')
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
<style>
</style>
二、后端发送邮件,为保证安全,发送包含code码的地址到邮箱
邮箱中配置 登录自己的qq邮箱
设置 ---- 账户 ---- 点击开启 ---- 获取自己的授权码
django的settings中配置邮箱
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.qq.com' # 腾讯QQ邮箱 SMTP 服务器地址
EMAIL_PORT = 25 # SMTP服务的端口号
EMAIL_HOST_USER = '********@qq.com' # 发送邮件的QQ邮箱
EMAIL_HOST_PASSWORD = 'rdyytasimbcghcif' # 在QQ邮箱->设置->帐户->“POP3/IMAP......服务” 里得到的在第三方登录QQ邮箱授权码
后端发送携带code码的地址到邮件中
class GetEmail(APIView):
def post(self, request):
# 获取邮箱
email = request.data.get('email')
try:
user = User.objects.get(email=email)
if user:
code = uuid.uuid1().hex
print(code)
try:
subject = '重置密码'
message = "'http://localhost:8080/get_code?code={}'".format(code)
from_email = '*********@qq.com' #你的邮箱
recipient_list = [email]
send_sms(subject, message, from_email, recipient_list)
# send_sms.delay(subject, message, from_email, recipient_list)
# 成功存入redis,code为key,邮箱为value加过期时间
res = redis.Redis()
res.setex(code, 3600, email)
res.close()
return Response({'code': 200, 'data': code})
except:
return Response({'code': 10011, 'msg': '发送邮件失败'})
else:
return Response({'code': 400})
except:
# 返回结果
return Response({'code': 10010, 'msg': '邮箱不存在无法进行验证'})
使用异步任务发送邮件
from my_celery import app
@app.task()
def send_sms(subject,message,from_email,recipient_list):
result = mail.send_mail(subject, message, from_email, recipient_list)
print(result)
print('发送开始,发送邮件成功')
三、点击邮件里的地址,解析邮件里边的code,跳转到修改密码界面,输入修改的数据传入后端进行修改
1、获取修改密码前端的链接地址
class PassCode(APIView):
def get(self, request):
# 获取唯一标识
print('111111111111')
code = request.query_params.get('code')
# 验证
res = redis.Redis()
email = res.get(code)
if email:
# 跳转到修改密码页面
url = "http://localhost:8080/password?code={}".format(code)
return Response(url)
else:
# 跳转到vue页面提示验证失败,不能进行修改
pass
2、前端点击修改密码,将修改后的数据发送给后端
<template>
请输入新密码:<input type="text" v-model="data"><br>
<button @click="get_email">修改</button>
</template>
<script>
import Axios from 'axios'
export default {
data() {
return {
data: "",
};
},
methods: {
get_email() {
let code = this.$route.query.code
Axios.post("users/put_pass/", {
password: this.data,
code:code
})
.then((resp) => {
console.log("2222222", resp);
alert('修改密码成功')
})
.catch((err) => {
console.log(err);
});
},
}
}
</script>
<style>
</style>
3、后端进行修改数据
class PutPass(APIView):
def post(self, request):
code = request.data.get('code')
print('code', code)
res = redis.Redis()
email = res.get(code).decode()
pwd = request.data.get('password')
print('email', email)
password = make_password(pwd)
User.objects.filter(email=email).update(password=password)
return Response({'code': 200, 'msg': '修改密码成功'})