企业级后台集成方案vue-element-admin

梦里梦外; 2024-05-23 18:58 61阅读 0赞

![168c1abc67f4402ebfc99ff077a3e4da.gif][]

> 哈喽~大家好，这篇来看看企业级后台集成方案vue-element-admin。
> 
> ?个人主页：[个人主页][Link 1]
> 
> ? 系列专栏： [【专栏】][Link 2]
> 
> ?与这篇相关的文章：
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td>SpringCloud Sentinel 使用</td> 
>    <td><a href="https://blog.csdn.net/aasd23/article/details/128032516?spm=1001.2014.3001.5501" title="SpringCloud Sentinel 使用_程序猿追的博客-CSDN博客_springcloud使用sentinel" rel="nofollow">SpringCloud Sentinel 使用_程序猿追的博客-CSDN博客_springcloud使用sentinel</a></td> 
>   </tr> 
>   <tr> 
>    <td>将Nacos注册到springboot使用以及Feign实现服务调用</td> 
>    <td><a href="https://blog.csdn.net/aasd23/article/details/127961919?spm=1001.2014.3001.5502" title="将Nacos注册到springboot使用以及Feign实现服务调用_程序猿追的博客-CSDN博客_nacos springboot 服务调用" rel="nofollow">将Nacos注册到springboot使用以及Feign实现服务调用_程序猿追的博客-CSDN博客_nacos springboot 服务调用</a></td> 
>   </tr> 
>   <tr> 
>    <td>微服务介绍与 SpringCloud Eureka</td> 
>    <td><a href="https://blog.csdn.net/aasd23/article/details/127913922?spm=1001.2014.3001.5502" title="微服务介绍与 SpringCloud Eureka_程序猿追的博客-CSDN博客" rel="nofollow">微服务介绍与 SpringCloud Eureka_程序猿追的博客-CSDN博客</a></td> 
>   </tr> 
>  </tbody> 
> </table>

**目录**

一、前言

1、什么是vue-element-admin？

2、安装

1）前序准备

2）目录结构

3）正式安装

二、跨域认证

1、Session认证

2、Token认证

3、JWT的使用

三、与后端代码联调

1、前端代码

--------------------

## 一、前言 ##

### 1、什么是vue-element-admin？ ###

**官网介绍**

> **vue-element-admin** 是一个后台前端解决方案，它基于 vue和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

[官网地址][Link 3]

**建议**

> 本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

*  集成方案: [vue-element-admin][]
 *  基础模板: [vue-admin-template][]
 *  桌面终端: [electron-vue-admin][]
 *  Typescript 版: [vue-typescript-admin-template][] (鸣谢: [@Armour][Armour])
 *  Others: [awesome-project][]

![652901ef3ec843c9a88a0da4305014dd.png][]

**它的功能**

![2dc40c19a18a446bac3a93e1a4426af0.png][]

很多，自行看官网

### 2、安装 ###

#### 1）前序准备 ####

你需要在本地安装 node和 git。本项目技术栈基于 ES2015、vue、vuex、vue-router、vue-cli 、axios 和 element-ui，所有的请求数据都使用Mock.js进行模拟。

#### 2）目录结构 ####

├── build                      # 构建相关
    ├── mock                       # 项目mock 模拟数据
    ├── plop-templates             # 基本模板
    ├── public                     # 静态资源
    │   │── favicon.ico            # favicon图标
    │   └── index.html             # html模板
    ├── src                        # 源代码
    │   ├── api                    # 所有请求
    │   ├── assets                 # 主题 字体等静态资源
    │   ├── components             # 全局公用组件
    │   ├── directive              # 全局指令
    │   ├── filters                # 全局 filter
    │   ├── icons                  # 项目所有 svg icons
    │   ├── lang                   # 国际化 language
    │   ├── layout                 # 全局 layout
    │   ├── router                 # 路由
    │   ├── store                  # 全局 store管理
    │   ├── styles                 # 全局样式
    │   ├── utils                  # 全局公用方法
    │   ├── vendor                 # 公用vendor
    │   ├── views                  # views 所有页面
    │   ├── App.vue                # 入口页面
    │   ├── main.js                # 入口文件 加载组件 初始化等
    │   └── permission.js          # 权限管理
    ├── tests                      # 测试
    ├── .env.xxx                   # 环境变量配置
    ├── .eslintrc.js               # eslint 配置项
    ├── .babelrc                   # babel-loader 配置
    ├── .travis.yml                # 自动化CI配置
    ├── vue.config.js              # vue-cli 配置
    ├── postcss.config.js          # postcss 配置
    └── package.json               # package.json

#### 3）正式安装 ####

克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git

进入项目目录

cd vue-element-admin

安装依赖

npm install

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npm.taobao.org

本地开发 启动项目

npm run dev

ok，之后使用vscode打开

注：

若依赖安装不成功，很大概率是node-sass安装失败。

node-sass因为其历史原因，安装时极易失败，同时node-sass依赖了Python环境，因此电脑上需要安装配置Python2。

建议直接使用课程提供的包含有依赖包的项目，简化学习曲线。

## 二、跨域认证 ##

### 1、Session认证 ###

> 互联网服务离不开用户认证。一般流程是下面这样。
> 
> 1）用户向服务器发送用户名和密码。
> 
> 2）服务器验证通过后，在当前对话（session）里面保存相关数据，比如用户角色、登录时间等。
> 
> 3）服务器向用户返回一个 session\_id，写入用户的 Cookie。
> 
> 4）用户随后的每一次请求，都会通过 Cookie，将 session\_id 传回服务器。
> 
> 5）服务器收到 session\_id，找到前期保存的数据，由此得知用户的身份。

**session 认证流程**

![f6a6a930231342b0829fbcd8ffd93081.png][]

### 2、Token认证 ###

session 认证的方式应用非常普遍，但也存在一些问题，扩展性不好，如果是服务器集群，或者是跨域的服务导向架构，就要求 session 数据共享，每台服务器都能够读取 session，针对此种问题一般有两种方案：

1） 一种解决方案是session 数据持久化，写入数据库或别的持久层。各种服务收到请求后，都向持久层请求数据。这种方案的优点是架构清晰，缺点是工程量比较大。

2）一种方案是服务器不再保存 session 数据，所有数据都保存在客户端，每次请求都发回服务器。Token认证就是这种方案的一个代表。

**token认证流程**

![1b7bdca4262d4b9cba4b33a70cf652b3.png][]

**Token认证的特点**

1）基于 token 的用户认证是一种服务端无状态的认证方式，服务端不用存放 token 数据。

2）用解析 token 的计算时间换取 session 的存储空间，从而减轻服务器的压力，减少频繁的查询数据库

3）token 完全由应用管理，所以它可以避开同源策略

### 3、JWT的使用 ###

JSON Web Token（简称 JWT）是一个token的具体实现方式，是目前最流行的跨域认证解决方案。

JWT 的原理是，服务器认证以后，生成一个 JSON 对象，发回给用户，具体如下：

![d8bf73a282fa4df1835531e170edd455.png][]

用户与服务端通信的时候，都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。

为了防止用户篡改数据，服务器在生成这个对象的时候，会加上签名。

JWT 的由三个部分组成，依次如下：

Header（头部）

Payload（负载）

Signature（签名）

三部分最终组合为完整的字符串，中间使用 . 分隔，如下：

Header.Payload.Signature

![b8887f98bbf94abeb21f8ff1112316f5.png][]

**Header**

Header 部分是一个 JSON 对象，描述 JWT 的元数据

![05a889ce4f344a83b17d3f560317a328.png][]

alg属性表示签名的算法（algorithm），默认是 HMAC SHA256（写成 HS256）

typ属性表示这个令牌（token）的类型（type），JWT 令牌统一写为JWT

最后，将上面的 JSON 对象使用 Base64URL 算法转成字符串。

**Payload**

Payload 部分也是一个 JSON 对象，用来存放实际需要传递的数据。JWT 规定了7个官方字段，供选用。

![19e92566fca04869a6b0e433352f5068.png][]

注意，JWT 默认是不加密的，任何人都可以读到，所以不要把秘密信息放在这个部分。

这个 JSON 对象也要使用 Base64URL 算法转成字符串。

**Signature**

Signature 部分是对前两部分的签名，防止数据篡改。

首先，需要指定一个密钥（secret）。这个密钥只有服务器才知道，不能泄露给用户

然后，使用 Header 里面指定的签名算法（默认是 HMAC SHA256），按照下面的公式产生签名。

![06250bf5cfec43e5a317f52d80ca41d7.png][]

算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用"点"（`.`）分隔，就可以返回给用户。

![6a7f5310c3f6451684a8cebbd2fb2dfa.png][]

**JWT的特点**

客户端收到服务器返回的 JWT，可以储存在 Cookie 里面，也可以储存在 localStorage。

客户端每次与服务器通信，都要带上这个 JWT，可以把它放在 Cookie 里面自动发送，但是这样不能跨域。

更好的做法是放在 HTTP 请求的头信息`Authorization`字段里面，单独发送。

**导入依赖**

<dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>${jwt.version}</version>
    </dependency>

**生成Token**

![6559fe20d6b840d6be11720e6b73bae3.png][]

**解析Token**

![abd2e71016044668ad5a216ca2cb887a.png][]

## 三、与后端代码联调 ##

就拿登录举例

### 1、前端代码 ###

登录界面

![a28da658d4994ce886da20ffd023ab97.png][]

首页界面

![5bdbd589f86745b3a403e3ec50145af7.png][]

更改首页界面代码

src 下面的 views 里面的 login 的index.vue 进行修改，例如xx标题，placeholder

![4e1e45176f53434182a926714f7f2c6a.png][]

编写前端发送的请求代码

在 src 下面的api目录的user.js 文件编写发送的前端请求

/**
     * 用户登录
     * @returns
     */
    export async function login(data) {
        return await http.login("/api/user/login",data)
    }

> **不积跬步无以至千里，趁年轻，使劲拼，给未来的自己一个交代！向着明天更好的自己前进吧！**
> 
> ![d5358fcd619443fe98143f2fd5fef762.gif][]

[168c1abc67f4402ebfc99ff077a3e4da.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/ccdce8595caf4510b40e36765af86493.gif
[Link 1]: https://blog.csdn.net/aasd23?spm=1000.2115.3001.5343
[Link 2]: https://blog.csdn.net/aasd23/category_12088582.html?spm=1001.2014.3001.5482
[Link 3]: https://panjiachen.github.io/vue-element-admin-site/zh/guide/
[vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[electron-vue-admin]: https://github.com/PanJiaChen/electron-vue-admin
[vue-typescript-admin-template]: https://github.com/Armour/vue-typescript-admin-template
[Armour]: https://github.com/Armour
[awesome-project]: https://github.com/PanJiaChen/vue-element-admin/issues/2312
[652901ef3ec843c9a88a0da4305014dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/21cbc4ebba874fef8896a631ed04d06f.png
[2dc40c19a18a446bac3a93e1a4426af0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/40c007fa809d49e3b46fce3b508211d0.png
[f6a6a930231342b0829fbcd8ffd93081.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/9df8beeadff64ab9b0c044221e9222e1.png
[1b7bdca4262d4b9cba4b33a70cf652b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/05df5c6fb5c5419b994469c4a3223ad4.png
[d8bf73a282fa4df1835531e170edd455.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/d0801a3382ce4e878b7d73fbb8e2aacb.png
[b8887f98bbf94abeb21f8ff1112316f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/653618565dfb4fabb40098eaa50aec22.png
[05a889ce4f344a83b17d3f560317a328.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/e4457b13d6a84eb2a4fd7a9265ee6476.png
[19e92566fca04869a6b0e433352f5068.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/e021556eb13a4a5585b6f6ed6049ce66.png
[06250bf5cfec43e5a317f52d80ca41d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/5f95a09bcafb414697f1c0a873c5edd7.png
[6a7f5310c3f6451684a8cebbd2fb2dfa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/940a046decb2489abedfe66fb7292192.png
[6559fe20d6b840d6be11720e6b73bae3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/e87661184083416ba9a0f3b20b8a5a77.png
[abd2e71016044668ad5a216ca2cb887a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/b51beeec7fb649248aab7db6d6f80078.png
[a28da658d4994ce886da20ffd023ab97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/47ee60f705e64ec793dff1039cc394a3.png
[5bdbd589f86745b3a403e3ec50145af7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/f1f29a41d27e4a45afd0d896ce949551.png
[4e1e45176f53434182a926714f7f2c6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/7d4422dd0d35436dae723ae34bc896f0.png
[d5358fcd619443fe98143f2fd5fef762.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/acdfb134513a44fdb23d3b525c885abc.gif