在使用django+vue完成平台功能开发登录功能,实现后,写这个文章进行记载!!欢迎交流
因为做的是内部使用平台,手动创建账号形式,没用到注册功能,无需实现
一、登录的功能逻辑设计
1、前端页面输入用户电话和密码点击登录
2、后端验证是否登录成功,返回token,存储到localstorage中
3、后端控制token是否过期
二、django后端实现
1、登录接口
接受前端访问请求,验证传递过来的用户是否正确,返回token 以及用户的基础信息
@csrf_exempt
def login(request):
try:
if request.method == 'POST':
phone = request.POST.get('username')
password = request.POST.get('password')
passwd = password + '{' + phone + '}'
auth = Blogin().auth_user(phone, psd)
if auth ['code'] == '000000':
if not request.session.session_key:
request.session.save()
print(str(phone)+"新会话")
# request.session.set_expiry(3600*4)
md5 = hashlib.md5()
md5.update((phone+passwd+"1258"+str(time.time())).encode())
token = md5.hexdigest()
request.session['token'] = token
request.session['id'] = auth['data'][0]['id']
request.session['name'] = auth ['data'][0]['user_name']
request.session.save()
response = auth ['data'][0]
response['password'] = token
return JsonResponse('登录成功', response, '000000')
else:
return Response('登录失败', auth["msg"], '999999')
except Exception as e:
return Response(str(e), auth["msg"], '999999')
2、登出接口
接受前端的访问请求,清空session中的token
@csrf_exempt
def logout(request):
request.session.flush()
return Response('退出登录成功', '', code='000000')
三、vue前端实现
1、前端写页面展示逻辑
2、前端输入内容的rules验证
前两个逻辑较简单,这里就不展示代码了
3、前端调用后端方法处理
其中login是调用后端接口逻辑
vue的method中写
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
login(this.ruleForm).then(res => {
if (res.code == '000000') {
if (this.rememberpwd) {
//保存帐号到cookie,有效期1天
setCookie('user_name', res.data['user_name'], 1)
//保存密码到cookie,有效期1天
setCookie('user_phone', res.data['user_mobile'], 1)
} else {
delCookie('user_name')
delCookie('user_phone')
}
//如果请求成功就让他2秒跳转路由
setTimeout(() => {
this.logining = false
localStorage.setItem('logintoken', res.data['password'])
// 缓存用户个人信息
localStorage.setItem('userdata', JSON.stringify(res.data))
this.$store.commit('login', 'true')
this.$router.push({ path: '/testcase/TestCase' })
}, 1000)
} else {
this.$message.error(res.msg)
this.logining = false
return false
}
})
} else {
this.$message.error('请输入用户名密码!')
this.logining = false
return false
}
})
},
4、js文件中暴露的向后端请求链接
export const login = (params) => { return loginreq("post", "/XXXXX/login", params) };
5、axios发起请求方法
// 登录请求方法
const loginreq = (method, url, params) => {
return axios({
method: method,
url: url,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
data: params,
traditional: true,
transformRequest: [
function(data) {
let ret = ''
for (let it in data) {
ret +=
encodeURIComponent(it) +
'=' +
encodeURIComponent(data[it]) +
'&'
}
return ret
}
]
}).then(res => res.data);
};