fix bug

package.json

@@ -12,6 +12,10 @@
     "@element-plus/icons-vue": "^2.0.6",
     "animate.css": "^4.1.1",
     "element-plus": "^2.2.9",
+    "js-base64": "^3.7.2",
+    "js-md5": "^0.7.3",
+    "npm": "^8.17.0",
+    "nprogress": "^0.2.0",
     "path": "^0.12.7",
     "pinia": "^2.0.16",
     "pinia-plugin-persistedstate": "^2.1.1",

src/api/axios.js

@@ -0,0 +1,74 @@
+/**
+ * 全站http配置
+ *
+ * axios参数说明
+ * isSerialize是否开启form表单提交
+ * isToken是否需要token
+ */
+import axios from 'axios'
+import website from '@/config/website'
+import { Base64 } from 'js-base64'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import { getToken } from '../utils/auth.js'
+import router from '../router/index.js'
+
+// 默认超时时间
+axios.defaults.timeout = 100000
+// 返回其他状态码
+axios.defaults.validateStatus = function (status) {
+  return status >= 200 && status <= 500
+}
+// 跨域请求，允许保存cookie
+axios.defaults.withCredentials = true
+// NProgress 配置
+NProgress.configure({
+  showSpinner: false
+})
+// http request拦截
+axios.interceptors.request.use(config => {
+  // 开启 progress bar
+  NProgress.start()
+  const meta = (config.meta || {})
+  const isToken = meta.isToken === false
+  config.headers.Authorization = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`
+  // 让每个请求携带token
+  if (getToken() && !isToken) {
+    config.headers['Blade-Auth'] = 'bearer ' + getToken()
+  }
+  // headers中配置text请求
+  if (config.text === true) {
+    config.headers['Content-Type'] = 'text/plain'
+  }
+  // headers中配置serialize为true开启序列化
+  // if (config.method === 'post' && meta.isSerialize === true) {
+  //   config.data = serialize(config.data)
+  // }
+  return config
+}, error => {
+  return Promise.reject(error)
+})
+// http response 拦截
+axios.interceptors.response.use(res => {
+  // 关闭 progress bar
+  NProgress.done()
+  // 获取状态码
+  const status = res.data.code || res.status
+  const statusWhiteList = website.statusWhiteList || []
+  // 如果在白名单里则自行catch逻辑处理
+  if (statusWhiteList.includes(status)) return Promise.reject(res)
+  // 如果是401则跳转到登录页面
+  if (status === 401) {
+    router.push('/login')
+  }
+  // 如果请求为非200否者默认统一处理
+  if (status !== 200) {
+    return Promise.reject(res)
+  }
+  return res
+}, error => {
+  NProgress.done()
+  return Promise.reject(error)
+})
+
+export default axios

src/api/fetch.js

@@ -1,9 +1,10 @@
 /**
  * Created by ebi on 2017/5/11.
  */
-import axios from 'axios'
+import axios from './axios.js'
 import router from '../router'
 import { removeToken, getToken } from '../utils/auth'
+import { ElMessage } from 'element-plus'
 
 axios.defaults.baseURL = ''
 
@@ -20,7 +21,7 @@ axios.interceptors.request.use(config => {
 })
 
 // insurance 保险 502 503 504时兜底的
-function fetch (url = '', params = {}, method = 'get', contentType = 'form', insurance, timeout = 15000) {
+function fetch (url = '', params = {}, method = 'get', contentType = 'form', header = {}, insurance, timeout = 15000) {
   contentType === 'form' && (contentType = 'application/x-www-form-urlencoded')
   contentType === 'json' && (contentType = 'application/json')
   contentType === 'file' && (contentType = 'multipart/form-data')
@@ -29,7 +30,7 @@ function fetch (url = '', params = {}, method = 'get', contentType = 'form', ins
     query.push(k + '=' + params[k])
   }
   let qs = query.join('&')
-  if (method.toLowerCase() === 'get' && query.length > 0) {
+  if (contentType === 'application/x-www-form-urlencoded' && query.length > 0) {
     url += (url.indexOf('?') < 0 ? '?' : '&') + qs
   }
   if (contentType !== 'application/x-www-form-urlencoded' && method !== 'get') {
@@ -42,7 +43,8 @@ function fetch (url = '', params = {}, method = 'get', contentType = 'form', ins
       url: '/api' + url,
       data: qs,
       headers: {
-        'Content-Type': contentType
+        'Content-Type': contentType,
+        ...header
       }
     }
     const success = (response) => {
@@ -54,17 +56,18 @@ function fetch (url = '', params = {}, method = 'get', contentType = 'form', ins
       if (status >= 200 && status <= 401) {
         if (data.code === 401) { // 未登录c
           removeToken()
-          clean()
           router.push(`/?redirect=${encodeURIComponent(window.location.href)}`)
           reject(new Error('需要登录'))
-          Message.error('登录过期，请重新登录')
+          ElMessage.error('登录过期，请重新登录')
           return
         }
         resolve(data)
       } else if (status === 500) {
+        resolve(data)
         router.push('/500')
       } else {
-        Message.success(status + '-' + statusText)
+        resolve(data)
+        ElMessage.success(status + '-' + statusText)
       }
     }
     axios(requestParams).then(success).catch((err) => {
@@ -77,9 +80,10 @@ function fetch (url = '', params = {}, method = 'get', contentType = 'form', ins
         if (window.location.href.indexOf('/zu') > -1) {
           msg += ` ${err.message}`
         }
-        Message.error(msg)
+        ElMessage.error(msg)
       } else {
-        Message.error(err.response.data && err.response.data.msg ? err.response.data.msg : '网络异常，请点击重试')
+        resolve(err.data)
+        // ElMessage.error(err.data.error_description ? err.data.error_description : '网络异常，请点击重试')
       }
     })
   })

src/api/index.js

@@ -1,11 +1,6 @@
-import fetch from './fetch'
+import login from './login/index.js'
 
 export default {
   uploadPath: '/api/blade-file/file/upload', // 上传
-  // 注册 登录
-  loginApi: {
-    sendSMS (params) {
-      return fetch('/blade-pc-applet/wechat/home/getHomeNewList', params)
-    }
-  }
+  login
 }

src/api/login/index.js

@@ -0,0 +1,21 @@
+import fetch from '../fetch.js'
+
+export default {
+  /**
+   * 获取验证码
+   * @returns {*}
+   */
+  captcha () {
+    return fetch('/blade-auth/oauth/captcha')
+  },
+  login (param, hader) {
+    return fetch('/blade-auth/oauth/token', param, 'post', 'form', {
+      'Tenant-Id': '000000',
+      'Captcha-Key': hader.captchaKey,
+      'Captcha-Code': hader.captchaCode
+    })
+  },
+  sendSMS (params) {
+    return fetch('/blade-pc-applet/wechat/home/getHomeNewList', params)
+  }
+}

src/config/website.js

@@ -0,0 +1,10 @@
+/**
+ * 全局配置文件
+ */
+export default {
+  title: '梧桐树云平台',
+  tenant: '000000',
+  clientId: 'saber', // 客户端id
+  clientSecret: 'saber_secret', // 客户端密钥
+  statusWhiteList: []
+}

src/layout/top.vue

@@ -1,7 +1,7 @@
 <template>
       <el-row class='flex flex-align-center flex-justify-between top '>
         <el-col  :span='12'>
-          <div class='flex flex-justify-start flex-align-center light-green-bg'>
+          <div class='flex flex-justify-start flex-align-center padding'>
             <el-icon :size="20">
               <Filter />
             </el-icon>
@@ -13,8 +13,24 @@
           </div>
         </el-col>
         <el-col :span='12'>
-          <div class='flex-child-average flex-justify-center flex padding-right  light-green-bg'>
-            <el-button @click='nav.cleanMenu()'>清除缓存</el-button>
+          <div class='flex-child-average flex-justify-end flex padding-right '>
+            <div class='padding flex flex-align-center'>
+              <el-avatar class='mr-10' :size="30" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+              <el-dropdown>
+                <span class="el-dropdown-link">
+                  第五季
+                  <el-icon class="el-icon--right">
+                    <arrow-down />
+                  </el-icon>
+                </span>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item>个人中心</el-dropdown-item>
+                    <el-dropdown-item>退出登录</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -49,4 +65,11 @@ export default {
   border-bottom: whitesmoke solid 1px;
   box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1);
 }
+
+.avatar{
+  background-color: #c4c3c3;
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+}
 </style>

src/page/login.vue

@@ -36,17 +36,29 @@
                     </template>
                 </el-input>
               </el-form-item>
+              <el-form-item prop='name'>
+                <el-input
+                  v-model='form.code'
+                  size='large'
+                  placeholder="验证码"
+                  prefix-icon="Refresh"
+                >
+                  <template v-slot:append>
+                      <img :src='code' style='height: 35px' />
+                  </template>
+                </el-input>
+              </el-form-item>
               <el-form-item>
                 <div class='flex flex-align-center flex-justify-between full-width'>
                   <el-checkbox :checked='true'>记住我</el-checkbox>
-                  <el-button type='text' class='font-12'>忘记密码?</el-button>
+                  <el-link type='primary'  :underline='false' class='font-12'>忘记密码?</el-link>
                 </div>
               </el-form-item>
             </el-form>
             <el-button type='primary' class='full-width' size='large' @click='submint'>登录</el-button>
-            <div class='mt-20 flex flex-center'>
+            <div class='mt-10 flex flex-center'>
               <span>还没账户？</span>
-              <el-button type='text'>注册账户</el-button>
+              <el-link type='primary' :underline='false'>注册账户</el-link>
             </div>
             <el-divider/>
             <div class='flex flex-col'>
@@ -73,6 +85,7 @@
 </route>
 
 <script>
+import md5 from 'js-md5'
 export default {
   name: 'login',
   data () {
@@ -91,15 +104,34 @@ export default {
           { required: true, message: '请输入密码', trigger: 'blur' },
           { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
         ]
-      }
+      },
+      code: '',
+      header: ''
     }
   },
+  created () {
+    this.init()
+  },
   methods: {
+    init () {
+      this.$api.login.captcha().then(res => {
+        this.code = res.image
+        this.header = res.key
+      })
+    },
     submint () {
       this.$refs.loginForm.validate((res) => {
         if (res) {
-          this.$message.success('登录成功')
-          this.$router.replace('/')
+          const params = { tenantId: '000000', username: this.form.name, password: md5(this.form.pass), grant_type: 'captcha', scope: 'all', type: 'account' }
+          const header = { captchaKey: this.header, captchaCode: this.form.code }
+          this.$api.login.login(params, header).then(res => {
+            if (res.error_description) {
+              this.$message.error(res.error_description)
+              this.init()
+            } else {
+              this.$router.replace('/')
+            }
+          })
         } else {
           this.$message.error('登录失败')
           return false
@@ -109,7 +141,6 @@ export default {
     loginAdmin () {
       this.form.name = 'admin'
       this.form.pass = 'admin'
-      this.submint()
     }
   }
 }
@@ -146,7 +177,7 @@ export default {
     background-color: white;
     height: 500px;
     .form{
-      margin-top: 40px;
+      margin-top: 30px;
     }
   }
 

src/views/setting/index.vue

@@ -39,7 +39,7 @@ export default {
       this.user.info = { user: '123', name: 'holle' }
       this.data = this.$route.query
       this.user.$dispose()
-      this.$api.loginApi.sendSMS({ current: 1, size: 200 }).then((res) => {
+      this.$api.login.sendSMS({ current: 1, size: 200 }).then((res) => {
         if (res.code === 200) {
           this.list = res.data.records
         }