Vue3集成Pinia实现未登录访问接口时自动弹出登录表单

前言

最近为了学习微服务，在做一个分布式的博客项目。前端采用Vue3开发，目前遇到一个问题，在博客系统中，有的接口可以匿名访问（首页、文章预览等等），有的接口则需要登录才能访问（发布文章、点赞文章等等），接口是否需要访问，由后端来判断，如果某接口需要登录才能访问，但用户还未登录，则会返回一个特定状态码，例如999，此时前端需要判断这个状态码，提示用户需要登录，以及弹出登录表单。

目前我的项目中，请求表单封装为了一个组件，如果在每个请求接口的回调中，都进行状态码相关的逻辑判断，未免太过繁琐。在这里我引入了pinia，由它来控制表单的显隐。然后我在axios的请求响应拦截回调中，进行状态码的判断，修改pinia中对应state的值，然后会从父路由页面引入登录表单组件，使用watch监听pinia中state的值，如果监听到变化，就展示登录表单。本文来分享一下

步骤

首先在vue3项目中引入pinia，以及在main.js中配置，在此就不赘述

首先在 /src/store/modules/ 下创建一个文件 auth.js，定义了一个state：loginFormStatus，提供了一个action，来修改这个loginFormStatus的值，loginFormStatus就决定了登录表单的显示。

import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    loginFormStatus: false,
  }),
  actions: {
    toggleLoginForm() {
      this.loginFormStatus = !this.loginFormStatus;
    },
  },
});

其次需要在axios的请求响应拦截器中，进行配置。在这个文件中 就引入了上面定义的js，并且在接口返回特定状态码时，调用toggleLoginForm这个action，修改state的值。

import axios from 'axios';
import { localStorage } from '@/utils/storage';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '@/store/modules/auth.js';

//省略其它代码...

// 响应拦截器
service.interceptors.response.use(
    (response) => {
        //其它代码...
        let data = response.data;
        //接口未登录
        if (data.code === '999') {
          ElMessage({
            message: data.message,
            type: 'warning',
          });
          //弹出登录表单
          useAuthStore().toggleLoginForm();
          return;
        }
        return response.data;
    },
    (error) => {
        console.log("请求异常：", error);
    }
);

// 导出实例
export default service;

到这里，还需要有一个地方监听state的值，我的项目是在一个父路由的页面中监听，因为我的其他页面 都是这个页面的子路由，大概贴一下js部分代码吧

<template>
    //其余代码...
    <loginForm ref="loginFormRef" @refresh-page="refreshPage()"></loginForm>  
</template>
<script setup>
    import { computed, getCurrentInstance, onMounted, reactive, ref, watch } from 'vue';
    import { useAuthStore } from '@/store/modules/auth.js'

    //登录窗口
    const showLoginForm = computed(() => useAuthStore().loginFormStatus);
    watch(showLoginForm, () => {
      openLoginForm();
    });

    const loginFormRef = ref();

    //打开登录表单
    const openLoginForm = () => {
      loginFormRef.value.open();
    };
</script>

总结

以上 就完成了一个简单的未登录访问接口时自动弹出登录表单的效果，如有需要也可查看源码，地址如下：

• 前端：github.com/sxb326/blog…
• 后端：github.com/sxb326/blog…