Vue-AUTH 深度指南

Vue-AUTH 是一个轻量级的身份验证库，专为 Vue.js 应用程序设计。下面我们将详细探讨其目录结构、启动文件以及配置文件。

1. 项目目录结构及介绍

Vue-AUTH 的核心组件通常包括以下几个部分：

|-- src
|   |-- components     # 自定义认证组件
|   |-- plugins        # 包含 Vue-AUTH 插件
|   |-- store           #Vuex 存储模块
|   |-- router          # Vue 路由器配置
|   |-- main.js         # 应用入口文件，用于安装插件
|-- public             # 静态资源文件夹
|-- tests              # 测试文件
|-- .gitignore         # Git 忽略规则
|-- package.json       # 项目依赖和脚本

• src/components: 可能会包含自定义的登录、注册等身份验证组件。
• src/plugins: 这里会包含 Vue-AUTH 的导入和配置。
• src/store: 使用 Vuex 的状态管理模块，存储用户认证状态。
• src/router: 应用的路由配置，可能包含身份验证相关的路由保护。
• src/main.js: 应用的主入口文件，通常在这里安装并配置 Vue-AUTH 插件。
• public: 存放静态资源，如 favicon 等。
• tests: 测试文件夹，进行单元测试或集成测试。
• .gitignore: 规定 Git 忽略哪些文件或文件夹。
• package.json: 项目依赖和运行时的脚本配置。

2. 项目启动文件介绍

以 src/main.js 文件为例，这是应用的起点，主要用于安装 Vue-AUTH 插件并设置相关选项：

import { createApp } from 'vue';
import App from './App.vue'; 
import store from './store';
import router from './router';
import Auth from '@gravitano/vue-auth';

const app = createApp(App);

// 安装 Vue-AUTH 插件，并传递相关选项
app.use(Auth, {
  options: {...}, // 这里放置你的配置项
  store,
  axios, 
  router
});

// 将应用挂载到 '#app' 元素上
app.mount('#app');

在 main.js 中，我们首先导入了 Vue 库和主要组件（App.vue）、Vuex store、Vue 路由器以及 Vue-AUTH。然后通过 app.use() 方法安装 Vue-AUTH 插件，传入配置对象和其他必要的上下文实例。

3. 项目的配置文件介绍

Vue-AUTH 提供了一组默认配置，这些配置可以通过在 main.js 或单独的配置文件中覆盖来定制。以下是一些重要的配置项：

export const defaultOptions = {
  endpoints: { ... },
  token: { ... },
  user: { ... },
  moduleName: 'auth',
  expiredStorage: 'auth expired',
  redirect: { ... },
  registerAxiosInterceptors: true,
  storage: { ... }
};

- endpoints:

定义了身份验证端点，包括登录 (login)、注销 (logout) 和获取用户信息 (user) 的 URL 和方法。

- token:

配置如何处理令牌，如存储的属性名(property), 类型(type), 存储的名称(storageName) 和是否自动解码(autoDecode)。

- user:

设置关于用户信息的行为，如是否自动获取(autoFetch)，用户数据属性名(property) 和存储名称(storageName)。

- moduleName:

在 Vuex 中使用的模块名称。

- expiredStorage:

用于存储过期时间的键。

- redirect:

定义不同的重定向路径，如登录成功后的主页(home) 和未授权访问时的登录页面(login)。

- registerAxiosInterceptors:

是否开启 Axios 的拦截器，用于自动添加令牌。

- storage:

选择用于存储身份验证数据的驱动器，比如本地存储 (localStorage) 或 Cookie。

根据你的项目需求，你可以创建一个单独的配置文件，然后在 main.js 中导入并覆盖默认选项。

以上就是 Vue-AUTH 项目的目录结构、启动文件和配置文件的基本介绍。结合实际项目需求，调整配置以实现最佳的认证体验。