用户的登录

1.创建jwt加密

# 创建jwt加密：
import jwt
from project1 import settings
def ja_token(user):
    payload = {
        'user':user.username,
        'id':user.id,
        'mobile':user.mobile
    }
#     加密：
    token = jwt.encode(payload=payload,key=settings.SECRET_KEY,algorithm='HS256')
    return token

2.用户登录

# 登录视图：
class LoginView(APIView):
    def post(self,request):
#         获取账号和密码：
        user1 = request.data.get('user')
        pwd = request.data.get('pwd')

        try:
            user = User.objects.get(username=user1)
        except Exception as e:
            print(e)
            return Response({'msg':'用户不存在','code':404})

        if not user.check_password(pwd):
            return Response({'msg':'登录失败','code':404})
        token = ja_token(user)
        return Response({
            'msg':'用户%s登录成功' % user.username,
            'code':200,
            'token':token,
            'user':{
                'userName':user.username,
                'id':user.id,
            }
        })

登录前端代码

Login() {
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs["ruleForm"].validate(valid => {
        //如果通过校验开始登录
        if (valid) {

          // 发送ajax
          this.$axios.post("/users/login/", {
              user: this.LoginUser.name,
              pwd: this.LoginUser.pass,
              // withCredentials: true,
            })
            .then(res => {
              console.log("@@登录的响应：", res)
              // 200代表登录成功，其他的均为失败
              if (res.data.code == 200) {
                // res.data为后端响应的json
                // 隐藏登录组件
                this.isLogin = false;
                // 登录信息存到本地缓存
                let user = JSON.stringify(res.data.user);
                console.log("@@user", user)
                //要求后台返回什么样的数据？
                //{
                //     "code":200, 
                //     'msg': "欢迎user",
                //     "user":{
                //       userName:"xxx",
                //     },
                //
                //}
                // 前端存储用户信息，表示登录成功
                localStorage.setItem("user", user);
                localStorage.setItem("token", res.data.token)
                // sessionStorage.setItem("")
                // 登录信息存到vuex,控制页面欢迎信息
                // console.log("@@res.data.user", res.data.user)
                this.setUser(res.data.user);
                // 弹出通知框提示登录成功信息
                this.notifySucceed(res.data.msg);
              } else {//响应不是200
                // 清空输入框的校验状态
                this.$refs["ruleForm"].resetFields();
                // 弹出通知框提示登录失败信息
                this.notifyError(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err)
              return Promise.reject(err);
            });
        } else {//未通过用户校验
          return false;
        }
      });