RBAC前端架构-05：引入Element-UI及相关逻辑

1-文件调整

修改：frontend-vue2\src\main.js，引入Element UI

js 复制代码

import Vue from "vue";
import App from "./App.vue";
// 路由组件
import router from "./router";
// Vuex
import store from "./store";
// 引入 Element UI
import ElementUI from "element-ui";
// 引入 Element UI 的样式
import "element-ui/lib/theme-chalk/index.css";

// 使用 Element UI
Vue.use(ElementUI);

Vue.config.productionTip = false;

new Vue({
  router,
  store, // 把 store 注入全局
  render: (h) => h(App),
}).$mount("#app");

修改frontend-vue2\src\api\request.js，新增Element UI的Message提示组件

js 复制代码

// axios 封装
import axios from "axios";
import store from "@/store";
import router from "@/router";
import config from "@/config";
// 引入Element UI 库全局消息提示组件-Message
import { Message } from "element-ui";

// 创建 axios 实例
const service = axios.create({
  // 使用环境变量配置
  baseURL: config.baseURL,
  // 请求超时时间
  timeout: config.timeout || 5000,
});

// 请求拦截器：每次请求都带上 token
service.interceptors.request.use(
  (config) => {
    // 从Vuex 获取 token
    const token = store.state.token;
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器：统一处理错误
service.interceptors.response.use(
  (response) => {
    // 读取接口响应结构数据
    const { code, message } = response.data;
    if (code == 200) {
      return response.data;
    } else {
      Message({
        message: message || "请求失败",
        type: "error",
        duration: 3000,
      });
      return Promise.reject(new Error(message || "请求失败"));
    }
  },
  // HTTP 请求本身失败(非2xx)进入错误处理
  (error) => {
    let message = error.message;

    if (error.response) {
      // 根据 HTTP 状态码处理
      switch (error.response.status) {
        case 401:
          Message({
            message: "登录已过期，请重新登录",
            type: "error",
            duration: 3000,
          });
          // 调用Vuex的logout action
          store.dispatch("logout");
          // 跳转到登录页面
          router.push("/login");
          break;
        case 403:
          message = "权限不足";
          break;
        case 404:
          message = "请求资源不存在";
          break;
        case 500:
          message = "服务器内部错误";
          break;
        default:
          message = `请求失败: ${error.response.status}`;
      }
    } else if (error.request) {
      message = "网络连接异常";
    }

    Message({
      message: message,
      type: "error",
      duration: 3000,
    });

    return Promise.reject(error);
  }
);

export default service;

2-页面调整

修改frontend-vue2\src\views\Dashboard.vue，增加Element UI组件展示

html 复制代码

<template>
  <div class="dashboard">
    <!-- 使用 Element UI 的卡片组件 -->
    <el-card class="welcome-card">
      <div slot="header">
        <span>欢迎信息</span>
      </div>
      <h2>欢迎来到首页</h2>
      <p>这是登录后才能访问的页面</p>
      <!-- 使用 Element UI 的按钮组件 -->
      <el-button type="danger" @click="logout">退出登录</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  methods: {
    logout() {
      this.$store.dispatch("logout");
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.welcome-card {
  width: 500px;
  margin: 50px auto;
}
</style>

修改frontend-vue2\src\views\Login.vue，增加Element UI组件展示

html 复制代码

<template>
  <div class="login">
    <h2>登录页面</h2>
    <!-- 使用 Element UI 的表单组件 -->
    <el-form @submit.native.prevent="handleLogin" class="login-form">
      <el-form-item label="用户名：">
        <!-- 使用 Element UI 的输入框组件 -->
        <el-input v-model="username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <!-- 使用 Element UI 的密码输入框组件 -->
        <el-input
          type="password"
          v-model="password"
          placeholder="请输入密码"
          @keyup.enter.native="handleLogin"
        ></el-input>
      </el-form-item>
      <!-- 使用 Element UI 的按钮组件 -->
      <el-form-item>
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
    <!-- 使用 Element UI 的消息提示组件 -->
    <el-alert
      v-if="errorMsg"
      :title="errorMsg"
      type="error"
      show-icon
      :closable="false"
    >
    </el-alert>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      errorMsg: "",
    };
  },
  methods: {
    async handleLogin() {
      try {
        // 调用 Vuex 的 login action
        await this.$store.dispatch("login", {
          username: this.username,
          password: this.password,
        });
        // 登录成功后跳转到首页
        this.$router.push("/");
      } catch (err) {
        this.errorMsg = err.message || "登录失败";
      }
    },
  },
};
</script>

<style scoped>
.login {
  width: 400px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-form {
  margin-top: 30px;
}
</style>