【VUE+DRF】案例升级

1、功能完善（简易版）

1.1 后端API校验

基于drf的认证组件实现只有登录之后才能查看

utils/auth.py

from rest_framework.authentication import BaseAuthentication
from rest_framework.exceptions import APIException, AuthenticationFailed
from rest_framework import status
from api import models


class MineAuthenticationFailed(APIException):
    status_code = status.HTTP_200_OK


class MineAuthentcation(BaseAuthentication):
    def authenticate(self, request):
        token = request.query_params.get("token")
        if not token:
            raise MineAuthenticationFailed("token不存在")

        user_object = models.UserInfo.objects.filter(token=token).first()
        if not user_object:
            raise MineAuthenticationFailed("认证失败")

        return user_object, token

settings.py

REST_FRAMEWORK = {
    "DEFAULT_AUTHENTICATION_CLASSES": ["utils.auth.MineAuthentcation"],
}

account.py

class AuthView(MineApiView):
    authentication_classes = []

1.2 前端校验

axios.js

const _axios = axios.create(config)
const info = userInfoStore()

_axios.interceptors.request.use(function (config) {
    // console.log("请求拦截器：", config)
    // 1. 去pinia中读取当前用户token
    // 2. 发送请求时携带token
    if (info.userToken) {
        if (config.params) {
            config.params["token"] = info.userToken
        } else {
            config.params = {"token": info.userToken}
        }
    }
    return config
})
_axios.interceptors.response.use(function (response) {
    console.log("响应拦截器：", response)
    // 认证失败
    if (response.data.code === "1000") {
        router.replace({name: "login"})
    }
    return response
}, function (error) {
    console.log("拦截器异常", error)
    if (error.response.data.code === "1000") {
        router.replace({name: "login"})
    }
    return Promise.reject(error)
})

export default _axios

LoginView.vue

const doLogin = function () {
  // 1、获取数据
  console.log(msg.value)
  // 2、发送网络请求
  _axios.post("/api/auth/", msg.value).then((res) => {
    console.log(res.data)
    if (res.data.code === 0){
      store.doLogin(res.data.data)
      router.push({name: "home"})
    } else {
      error.value = res.data.msg
      setTimeout(function (){
        error.value=""
      }, 5000)
    }
  })
}