Element UIの日本語化

Vueプロジェクトのmain.tsに以下のコードを追加します。

import jaLocale from 'element-plus/es/locale/lang/ja'
app.use(ElementPlus, {
    locale: jaLocale,
})

Axiosの統一インターフェース作成

1. utilsディレクトリ内にrequest.tsを作成します。

import axios from "axios";
import { ElNotification } from "element-plus";
import { useAuthStore } from "@/stores/auth";
import router from "@/router";

const apiBase = "/api"; // 実際の環境に応じて設定
const client = axios.create({ baseURL: apiBase });

// レスポンスインターセプター
client.interceptors.response.use(
    (res) => {
        if (res.data.status === "success") {
            return res.data;
        } else {
            ElNotification.error(res.data.message || "サーバーでエラーが発生しました");
            return Promise.reject(res.data);
        }
    },
    (err) => {
        if (err.response?.status === 401) {
            ElNotification.warning("ログインが必要です");
            router.push("/login");
        } else {
            ElNotification.error("サーバーとの通信に失敗しました");
        }
        return Promise.reject(err);
    }
);

// リクエストインターセプター
client.interceptors.request.use(
    (config) => {
        const auth = useAuthStore();
        if (auth.credentials) {
            config.headers.Authorization = `Bearer ${auth.credentials}`;
        }
        return config;
    },
    (error) => Promise.reject(error)
);

export default client;

2. 以下のように開発用クロスドメイン対応を行います。

server: {
    proxy: {
        "/api": {
            target: "http://localhost:8080",
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, ""),
        },
    },
}

Axiosの使用例

1. API関数をまとめたファイルuser.tsを作ります。

import request from "@/utils/request";

export const fetchUserData = () => request.get("/user/profile");

export const authenticateUser = (username: string, password: string) => {
    const formData = new URLSearchParams();
    formData.append("username", username);
    formData.append("password", password);
    return request.post("/user/authenticate", formData);
};

2. コンポーネント内で呼び出す場合：

async function retrieveToken() {
    const userData = await fetchUserData();
    console.log(userData.info);
}

グローバルナビゲーションガード

1. permission.tsで未認証時のリダイレクトを設定します。

import router from "@/router/index";
import { useAuthStore } from "@/stores/auth";

const publicRoutes = ["/login"];

router.beforeEach((to, from, next) => {
    const auth = useAuthStore();
    if (auth.isAuthenticated || publicRoutes.includes(to.path)) {
        next();
    } else {
        next("/login");
    }
});

Piniaの永続化

1. プラグインをインストールします。

npm install pinia-plugin-persistedstate

2. main.tsでプラグインを適用します。

import { createPersistPlugin } from "pinia-plugin-persistedstate";
const storage = createPersistPlugin();
const pinia = createPinia();
pinia.use(storage);
app.use(pinia);

3. ストア定義時に永続化を有効化します。

export const useAuthStore = defineStore("auth", () => {
    const credentials = ref("");
    return { credentials };
}, {
    persist: true,
});

Vue Routerの設定

1. ルート定義を行う。

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    { path: "/login", name: "login", component: () => import("../views/Login.vue") },
    {
        path: "/dashboard",
        name: "dashboard",
        component: () => import("../views/Dashboard.vue"),
        children: [
            { path: "profile", component: () => import("../views/Profile.vue") },
            { path: "settings", component: () => import("../views/Settings.vue") },
        ],
    },
    { path: "/", redirect: "/login" },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

2. メニューでの遷移例：

    
        <User />
        <span>プロフィール</span>
    
    
        <Setting />
        <span>設定</span>
    

行データの操作

テーブル列で行データを使用する場合：

    
        <Edit />
    
    
        <Delete />