从零开始的前端学习路程-02

接收登录Token

VueUse  

使用vueuse-cookie把token存放在浏览器cookie中

npm i @vueuse/integrations
npm i universal-cookie@^6

找个页面试一下， 在之前登录成功方法中插入token。expires 属性设置过期时间，可以是一个 Date 对象、整数，这里是7天后过期

<template>
       
        .then(response => {  // 获取响应数据
          if (response.data.message === "登录成功") {
            ElMessage({
              message: response.data.message,
              type: 'success',
            })

            // 存token
            const cookie = useCookies()
            cookie.set("as-Token", response.data.data.Token, {
              expires: 7,
            })
</script>

axios拦截器

为了不用每次都传token，使用请求拦截器在请求头中加入token。还有接口返回错误后的弹窗判断，可以统一交给响应拦截器

先用响应拦截统一处理失败时提示。src\axios.js

import axios from "axios"
import { useCookies } from '@vueuse/integrations/useCookies'

const service = axios.create({
    baseURL: "/api"
})

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 请求TODO
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 响应TODO
    console.log(response)
    return response;
}, function (error) {
    // 对响应错误做点什么
    ElMessage({
        message: error.message,
        type: 'error',
    })
    return Promise.reject(error);
});

export default service

接下来用请求拦截器，处理请求头token。src\axios.js

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 请求TODO
    const cookie = useCookies()
    const token = cookie.get('login-Token')
    if(token){
        config.headers["Token"] = token
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

后端代码：

@router.get("/userinfo")
async def userinfo(token: str = Header(None)):
    if token == "FASTAPI000":
        return {"username": "testuser", "other_info": "some_info"}
    else:
        raise HTTPException(status_code=401, detail="无效的token")

 

注意：前后端代码中token需要全程小写

按钮幂等控制

登录按钮目前可以重复请求点击，我们可以稍加控制。

          <el-form-item>
            <el-button class="w-[300px]" round color="##337ecc" type="primary" @click="onSubmit" :loading="loading">登 录</el-button>   <!-- elm按钮组件中的loading属性关联响应式loading --> 
          </el-form-item>   

const loading = ref(false)  // 定义变量loading控制按钮loading状态 
const onSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (!valid) {
      return false
    }

    loading.value = true //请求接口前按钮开始loading  
    login(form.username, form.password)
      .then(succ => {  //获取成功的信息
        console.log(succ.data.message)
        if (succ.data.message === '登录成功') {
          ElMessage({
            message: succ.data.message,
            type: 'success',
          })
          //存Token
          const cookie = useCookies()
          cookie.set("login-token", succ.data.data.token)
          //请求用户信息接口
          loginfo().then(res=>{
            console.log(res.data)
          })
          router.push('/')
        } 
        else {
          ElMessage({
            message: succ.data.message,
            type: 'error',
          })
        }
      })
      .finally(() => { //不管成功与否收到消息后按钮都取消loading
        loading.value = false 
      })
  })
}

本地调试在fastapi登录接口前打个断点，发现loading成功