feat:登录接口接入

src/api/login/index.ts

@@ -7,9 +7,10 @@ import request from "@utils/request";
 export function login(data: object) {
     return request({
         url: '/youlai-auth/oauth/token',
+        method:'post',
         params: data,
         headers: {
-            'Authorization': 'Basic bWFsbC1hZG1pbi13ZWI6MTIzNDU2' // 客户端信息加密摘要认证，明文：mall-admin-web:123456
+            'Authorization': 'Basic bWFsbC1hZG1pbi13ZWI6MTIzNDU2' // 客户端信息Base64明文：mall-admin-web:123456
         }
     })
 }
@@ -39,7 +40,7 @@ export function logout() {
  */
 export function getCaptcha() {
     return request({
-        url: '/captcha',
+        url: '/captcha?t='+(new Date()).getTime().toString(),
         method: 'get'
     })
 }

src/layout/components/Sidebar/SidebarItem.vue

@@ -10,14 +10,7 @@
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template #title>
-        <svg
-            v-if="item.meta && item.meta.icon"
-            class="icon"
-            aria-hidden="true"
-            font-size="16px"
-        >
-          <use :xlink:href="item.meta.icon" />
-        </svg>
+
         <span v-if="item.meta && item.meta.title">{{
             t("route." + item.meta.title)
           }}</span>
@@ -36,7 +29,7 @@
 </template>
 
 <script>
-import path from 'path'
+import path from 'path-browserify'
 import { isExternal } from '@utils/validate'
 import AppLink from './Link.vue'
 

src/layout/components/TagsView/index.vue

@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import ScrollPane from './ScrollPane.vue'
-import path from 'path'
+import path from 'path-browserify'
 import {useStore} from "@store";
 import {
   defineComponent,

src/main.ts

@@ -7,9 +7,11 @@ import '@styles/index.scss'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
-
 import 'virtual:svg-icons-register';
 
+
+import '@/permission'
+
 const app=createApp(App)
 app
     .use(router)

src/permission.ts

@@ -1,8 +1,7 @@
 import router from "@router";
 import NProgress from 'nprogress';
-import {Local} from "@utils/storage";
-import {useStore} from "@store";
 import {ElMessage} from "element-plus";
+import {store} from "@store";
 
 NProgress.configure({showSpinner: false})
 
@@ -10,11 +9,9 @@ NProgress.configure({showSpinner: false})
 const whiteList = ['/login', '/auth-redirect']
 
 router.beforeEach(async (to, form, next) => {
-
     NProgress.start()
-    const store = useStore()
 
-    const hasToken = Local.get(`token`)
+    const hasToken =store.state.user.token
     if (hasToken) {
         // 如果登录成功，跳转到首页
         if (to.path === '/login') {

src/store/modules/user.ts

@@ -69,6 +69,7 @@ const userModule: Module<UserState, RootStateTypes> = {
                     const accessToken = token_type + " " + access_token
                     Local.set("token", accessToken)
                     commit('SET_TOKEN', accessToken)
+                    resolve(access_token)
                 }).catch(error => {
                     reject(error)
                 })

src/utils/request.ts

@@ -1,11 +1,12 @@
 import axios from "axios";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {Local} from "@utils/storage";
+import {store} from "@store";
 
 
 // 创建 axios 实例
 const service = axios.create({
-    baseURL: import.meta.env.VITE_BASE_API as any,
+    baseURL: import.meta.env.VITE_APP_BASE_API as any,
     timeout: 50000,
     headers: {'Content-Type': 'application/json;charset=utf-8'}
 })
@@ -16,8 +17,10 @@ service.interceptors.request.use(
         if (!config?.headers) {
             throw new Error(`Expected 'config' and 'config.headers' not to be undefined`);
         }
-        config.headers.Authorization = `${Local.get('token')}`;
-
+        if (store.state.user.token) {
+            config.headers.Authorization = `${Local.get('token')}`;
+        }
+        return config
     }, (error) => {
         return Promise.reject(error);
     }
@@ -39,6 +42,7 @@ service.interceptors.response.use(
         }
     },
     (error) => {
+        console.log('error', error)
         const {code, msg} = error.response.data
         if (code === 'A0230') {  // token 过期
             Local.clear(); // 清除浏览器全部缓存

src/views/login/index.vue

@@ -40,11 +40,29 @@
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+
+      <el-form-item prop="validateCode">
+         <span class="svg-container">
+            <svg-icon icon-class="validCode"/>
+          </span>
+        <el-input
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="请输入验证码"
+            style="width: 65%"
+            @keyup.enter.native="handleLogin"
+        />
+        <div class="validate-code">
+          <img :src="base64Captcha" @click="getCaptcha" height="38px"/>
+        </div>
+      </el-form-item>
+
+
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
 
       <div class="tips">
-        <span style="margin-right:20px;">username: admin</span>
-        <span> password: any</span>
+        <span style="margin-right:20px;">用户名: admin</span>
+        <span> 密码: 123456</span>
       </div>
 
     </el-form>
@@ -53,6 +71,7 @@
 
 <script>
 import SvgIcon from '@/components/SvgIcon/index.vue';
+import {getCaptcha} from "@/api/login";
 
 export default {
   name: 'Login',
@@ -70,7 +89,9 @@ export default {
     return {
       loginForm: {
         username: 'admin',
-        password: '111111'
+        password: '123456',
+        code: undefined,
+        uuid: undefined
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur'}],
@@ -78,9 +99,14 @@ export default {
       },
       loading: false,
       passwordType: 'password',
-      redirect: undefined
+      redirect: undefined,
+      base64Captcha: undefined
     }
   },
+  created() {
+    // 生成验证码
+    this.getCaptcha()
+  },
   watch: {
     $route: {
       handler: function(route) {
@@ -104,11 +130,6 @@ export default {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true
-
-          // 暂跳转首页控制台，后续整合登录
-          this.$router.push({ path:  '/' })
-          return false
-
           this.$store.dispatch('user/login', this.loginForm).then(() => {
             this.$router.push({ path: this.redirect || '/' })
             this.loading = false
@@ -120,6 +141,14 @@ export default {
           return false
         }
       })
+    },
+    // 获取验证码
+    getCaptcha(){
+      getCaptcha().then(response => {
+        const {img, uuid} = response.data
+        this.base64Captcha = "data:image/gif;base64," + img
+        this.loginForm.uuid = uuid;
+      })
     }
   }
 }
@@ -233,5 +262,17 @@ $light_gray:#eee;
     cursor: pointer;
     user-select: none;
   }
+  .validate-code {
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    img {
+      height: 52px;
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
+
 }
 </style>