# vue-admin-element

**Repository Path**: hewweibo_admin/vue-admin-element

## Basic Information

- **Project Name**: vue-admin-element
- **Description**: 使用vue-element-admin来修改的后台管理系统
功能：登录 动态路由 权限 和其他业务功能
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-17
- **Last Updated**: 2022-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

当我们删了一些没有用的时候 我们就要开始开发了

##### 第一、登录模块

> 1.  el-input中属性 tabindex 是表示使用 tab 按键 跳到下一个元素
>
> 2. validUsername 验证规则
>
> 3. 登录请求接口是在 store中的 我们要去哪里做一下账号密码加密
>
> 4. 加密规则 aes()
>
>    1. 对称加密
>    2. 不对成加密
>    3. 公私钥加密
>
> 5. aes加密流程
>
>    1. 安装crypto.js  npm i crypto-js
>
>    2. 在utilts中新建 ase.js 文件
>
>       ```js
>       /**
>        * 明文加密
>        */
>       import CryptoJS from "crypto-js";
>
>       const key = CryptoJS.enc.Utf8.parse("AOWQ4P0YEC4YXUKS");  //十六位十六进制数作为密钥
>       const iv = CryptoJS.enc.Utf8.parse('O3V2GCL1K2HNZ9Y7');   //十六位十六进制数作为密钥偏移量
>
>       //解密方法
>       export function Decrypt(word) {
>           let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
>           let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
>           let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
>           let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
>           return decryptedStr.toString();
>       }
>
>       //加密方法
>       export function Encrypt(word) {
>           let srcs = CryptoJS.enc.Utf8.parse(word);
>           let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
>           return encrypted.ciphertext.toString().toUpperCase();
>       }
>       ```
>
>    3. 使用
>
>       ```js
>       // 组件中导入
>       import { Encrypt } from "../../utils/aes";
>       Encrypt(加密的内容)
>       ```
>
> 6. 我们要简单的修改一下axios的封装 和设置代理
>
>    ```js
>    //设置代理 加在vue.config.js 中的 devServer
>    proxy: {
>      '/adminapp': {
>    	target: 'http://testadmin.xuexiluxian.cn/',
>    	changeOrigin: true,
>    	/*
>    	pathRewrite: {
>    	  '^/adminapp': ''
>    	}
>    	*/
>      }
>    }
>    ```
>
> 
>
>    ```
> 
> 7. axios
> 
>    **请求拦截器**
> 
>    ​	主要作用就是在发送请求前 向请求对象添加一些参数 或在请求前 统一做一些事情
> 
>    **响应拦截器**
> 
>    ​	主要作用就是 后端返回数据进行统一的处理，比如状态码 如果不是 200就统一报错
> 
>    ```js
>    import axios from 'axios'
>    import { MessageBox, Message } from 'element-ui'
>    import store from '@/store'
>    import { getToken } from '@/utils/auth'
> 
>    // create an axios instance
>    const service = axios.create({
>      // 前面需要加什么url process.env.VUE_APP_BASE_API 这个在根目录 .env.development
>      baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
>      timeout: 50000 // request timeout
>    })
> 
>    // request interceptor
>    service.interceptors.request.use(
>      config => {
>        // do something before request is sent
> 
>        if (store.getters.token) {
> 
>          // please modify it according to the actual situation
>          // 要设置成 Authorization
>          config.headers['Authorization'] = getToken()
>        }
>        return config
>      },
>      error => {
>        // do something with request error
>        console.log(error) // for debug
>        return Promise.reject(error)
>      }
>    )
> 
>    // response interceptor
>    service.interceptors.response.use(
> 
>      response => {
>        const res = response.data
>        console.log(res);
>        // 我们返回的正确状态码是 res.meta.code
> 
> 
>        if (res.meta.code === '10006') {
>          console.log(111111);
>          return res
>        }
> 
>        // // if the custom code is not 20000, it is judged as an error.
>        // 返回接口
>        if (res.meta.code !== "200") {
>          Message({
>            message: res.message || 'Error',
>            type: 'error',
>            duration: 5 * 1000
>          })
> 
>          // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
>          if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
>            // to re-login
>            MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
>              confirmButtonText: 'Re-Login',
>              cancelButtonText: 'Cancel',
>              type: 'warning'
>            }).then(() => {
>              store.dispatch('user/resetToken').then(() => {
>                location.reload()
>              })
>            })
>          }
>          return Promise.reject(new Error(res.message || 'Error'))
>        } else {
>          return res
>        }
>      },
>      error => {
>        console.log('err' + error) // for debug
>        Message({
>          message: error.message,
>          type: 'error',
>          duration: 5 * 1000
>        })
>        return Promise.reject(error)
>      }
>    )
> 
>    export default service
> 
>    ```
>
> 8. 状态码了解
>
>    1. 2xx
>       1. 200返回成功
>    2. 3xx
>       1. 302 重定向
>    3. 4xx
>       1. 400 参数不正确
>       2. 415 Unsupported Media Type：不支持的媒体类型
>       3. 403 没有权限
>       4. 404 找不到页面
>    4. 5xx
>       1. 500：内部服务器错误（也就是说后端接口报错了）
>
> 
>
> 
>
> 
>
>    vue-element-admin的登录流程
>
>    第一 先对输入的账号密码进行一个检验 校验成功之后 然后放到 vuex 的 actions中进行 发送请求 发送请求如果返回有token 那么就登录成功 登录成功会跳转到 路径上的重定向路径 ，中间会有一个路由拦截 判断你是否有获取到用户信息/权限 如果没有就不让你进去 如果获取了就可以进去 所以我们登录成功之后会走 获取用户信息的请求接口 然后携带token去获取到信息
>
> 



##### 第二、用户切换身份

因为我们可以是多个角色 不同权限嘛 所以我们当登录之后 会默认是角色的第一个个 其他展示在右上角 当他点击某个角色的时候就可以进行一个切换

1、我们登录之后要保存一下 第一个角色

2、在顶部头像哪里渲染全部角色

3、当点击角色之后  触发store里的 changeRoles

看到58分

讲了element-admin的路由拦截

获取用户信息 修改axios 保存cookie 说了nginx代理 获取用户信息接口 user/getInfo



##### 第三、动态路由

登录并实现动态路由得步骤

1. 发送账号密码到后端，拿到token
2. 拿到token之后，存储起来
3. 然后拿token去请求后端返回用户信息和角色信息，拿到用户信息和角色信息之后，进行存储，然后我们默认把第一个角色作为当前角色
4. 拿着默认角色得id向后台获取路由菜单信息
5. 拿到路由数据之后，进行数据转换，把这些数据进行拼接 拼接成我们路由对象 然后生成路由



##### 第四、动态权限管理

动态权限实现步骤

1. 通过用户的 ID 或编码获取路由的时，顺带把当前角色的权限编码获取到，vuex/permission 

2. 获取到权限编码之后，把权限编码存储在vuex中

3. 提供对外访问的 getter 方法

4. 修改vue的自定义指令  代码  src\directive\permission\permission.js

5. 要使用这个指令必须要在页面中引入

6. 使用 v-permission指令

     

   ```html
   <button v-permission="['ROLE_SUPERADMIN']">按钮</button>
   如果是角色 需要在以ROLE_开头 ，权限不需要
   ```