vue-element-admin鉴权

### Vue-Element-Admin 中实现鉴权的方法 Vue-Element-Admin 是一个基于 Vue.js 的后台管理系统模板，提供了丰富的组件和功能来帮助开发者快速构建管理平台。为了确保系统的安全性，在实际应用中通常会集成鉴权机制。 #### 鉴权流程概述 在 Vue-Element-Admin 中，鉴权主要通过 JWT (JSON Web Token) 来完成。JWT 可用于验证用户身份并授权访问受保护资源。当用户成功登录后，服务器端返回带有签名的 token 给客户端存储起来；之后每次请求 API 接口时都将此 token 放入 HTTP Header 中传递给服务端进行校验[^2]。 #### 实现步骤详解 1. **安装依赖** 使用 `npm` 或者 `yarn` 安装必要的库： ```bash npm install axios jsonwebtoken vuex --save ``` 2. **配置 Axios 默认参数** 修改 `/src/utils/request.js` 文件中的默认设置，以便自动携带 token 请求头信息： ```javascript import axios from 'axios' const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) // 添加请求拦截器 service.interceptors.request.use( config => { if (store.getters.token) { // 判断是否存在token 如果存在的话 就把token放在header里面一起发送出去 config.headers['Authorization'] = 'Bearer ' + getToken() } return config }, error => { Promise.reject(error) } ) ``` 3. **创建 Vuex Store 模块处理认证状态** 创建一个新的 store module (`/src/store/modules/user.js`) 来保存用户的登录状态以及获取到的 token: ```javascript export default { namespaced: true, state: () => ({ name: '', avatar: '', roles: [], token: '' }), mutations: { SET_TOKEN(state, token){ state.token = token; } }, actions:{ login({commit}, userInfo){ commit('SET_TOKEN', userInfo.token); } } } ``` 4. **编写 Login 页面逻辑** 在登录页面提交表单时调用接口向后端发起 POST 请求，并接收响应数据中的 token 存储至本地缓存或 Vuex State : ```html <!-- /src/views/Login.vue --> <template> ... </template> <script setup lang="ts"> import { ref } from "vue"; import router from "@/router/index"; let username = ref(""); let password = ref(""); function handleLogin() { this.$http.post('/login',{username,password}).then((res)=>{ localStorage.setItem("token", res.data.access_token); // 假设后端返回的数据结构中有 access_token 字段 router.push("/dashboard"); }); } </script> ``` 以上就是在 Vue-Element-Admin 中实现基本鉴权的方式之一。当然还可以根据业务需求进一步扩展和完善该方案，比如加入权限控制、角色分配等功能模块。