合并

.env.development

@@ -5,7 +5,4 @@ NODE_ENV='development'
 VITE_APP_PORT = 3000
 
 # 代理前缀
-VITE_APP_BASE_API = '/dev-api'
-
-# 代理地址
-VITE_APP_PROXY_TARGET = 'http://localhost:8989'
+VITE_APP_BASE_API = '/st/api'

.eslintrc-auto-import.json

@@ -281,6 +281,7 @@
     "watchWithFilter": true,
     "whenever": true,
     "defineStore": true,
-    "useRoute": true
+    "useRoute": true,
+    "useRouter": true
   }
 }

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@vueuse/core':
     specifier: ^10.7.2
     version: 10.7.2(vue@3.4.19)
+  axios:
+    specifier: ^1.6.7
+    version: 1.6.7
   element-plus:
     specifier: ^2.5.6
     version: 2.5.6(vue@3.4.19)
@@ -828,6 +831,20 @@ packages:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
     dev: false
 
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
+  /axios@1.6.7:
+    resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==}
+    dependencies:
+      follow-redirects: 1.15.5
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
@@ -907,6 +924,13 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
@@ -967,6 +991,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   /doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -1300,6 +1329,25 @@ packages:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
     dev: true
 
+  /follow-redirects@1.15.5:
+    resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
+  /form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   /fs-extra@11.2.0:
     resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
     engines: {node: '>=14.14'}
@@ -1626,6 +1674,18 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: false
+
   /mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -1867,6 +1927,10 @@ packages:
     hasBin: true
     dev: true
 
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}

src/layout/parts/Header.vue

@@ -38,11 +38,12 @@
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
-const route = useRoute()
+let collapse = ref(false)
+const router = useRouter()
 // 退出登录
 const logout = () => {
-  localStorage.removeItem('token')
-  route.to('/login')
+  userStore.logOut()
+  router.push('/login')
 }
 </script>
 <style scoped lang="scss">

src/router/guard.js

@@ -0,0 +1,25 @@
+import { AxiosWrapper } from '@/utils/axios-wrapper'
+import { checkResult } from '@/utils/checkResult'
+import { UserStore } from '@/store/user'
+
+export const registerBeforeRouter = (router) => {
+  router.beforeEach(async (to, from, next) => {
+    const userStore = UserStore()
+    const axios = new AxiosWrapper()
+    document.title = `${to.meta.title} `
+    const token = localStorage.getItem('token')
+    if (to.name != 'login') {
+      if (token) {
+        const result = await axios.get(`${import.meta.env.VITE_REQUEST_BASE}/token/tokenView`, null, {
+          headers: {
+            token: token
+          }
+        })
+        if (checkResult(result)) {
+          userStore.setUser(result.data)
+        }
+        next()
+      } else next('/login')
+    } else next()
+  })
+}

src/router/index.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { registerBeforeRouter } from './guard'
 export const homeIndex = () => import('@/views/home/index.vue')
 export const Layout = () => import('@/layout/index.vue')
 
@@ -76,5 +77,5 @@ const router = createRouter({
     }
   ]
 })
-
+registerBeforeRouter(router)
 export default router

src/store/api/login.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { get, omit } from 'lodash'
+import { get, omit } from 'lodash-es'
 import { AxiosWrapper } from '@/utils/axios-wrapper'
 const axios = new AxiosWrapper()
 export const LoginStore = defineStore('login', () => {

src/store/user.js

@@ -1,6 +1,19 @@
 import { defineStore } from 'pinia'
 export const UserStore = defineStore('user', () => {
   const user = ref({})
-  const setUser = computed((payload) => (user.value = payload))
-  return { user, setUser }
+  /**
+   * 将用户信息存起来;用户信息是在路由变更时,路由前置守卫去服务进行兑换而来
+   * @param {String} payload token串
+   */
+  const setUser = (payload) => {
+    user.value = payload
+  }
+  /**
+   * 清除用户信息并删除token
+   */
+  const logOut = () => {
+    user.value = {}
+    localStorage.removeItem('token')
+  }
+  return { user, setUser, logOut }
 })

src/utils/axios-wrapper.js

@@ -9,7 +9,7 @@ import { ErrorCode } from './error-code'
 let currentRequests = 0
 
 export class AxiosWrapper {
-  constructor({ baseUrl = import.meta.env.VITE_REQUEST_BASE, unwrap = true } = {}) {
+  constructor({ baseUrl = import.meta.env.VITE_APP_BASE_API, unwrap = true } = {}) {
     this.baseUrl = baseUrl
     this.unwrap = unwrap
   }

src/utils/checkResult.js

@@ -0,0 +1,19 @@
+import { isFunction, isString } from 'lodash-es'
+import { ElMessage } from 'element-plus'
+export const checkResult = (res, okText, errText) => {
+  const { errcode = 0, errmsg } = res || {}
+  if (errcode === 0) {
+    if (isFunction(okText)) {
+      return okText()
+    }
+    if (isString(okText)) ElMessage.success(okText)
+    else if (okText) ElMessage.success('操作成功')
+    return true
+  }
+  if (isFunction(errText)) {
+    return errText()
+  }
+  ElMessage.error(errText || errmsg)
+  // Message({ message: _errText || errmsg, duration: 60000 });
+  return false
+}

src/utils/util-methods.js

@@ -32,4 +32,4 @@ export const toBoolean = function (val) {
   }
 
   return val
-}
+}

src/views/login/index.vue

@@ -8,7 +8,7 @@
       <el-form ref="loginFormRef" :model="loginData" :rules="loginRules" class="login-form">
         <!-- 用户名 -->
         <el-form-item prop="username">
-          <el-input v-model="loginData.username" size="large" placeholder="请输入登录账号">
+          <el-input v-model="loginData.account" size="large" placeholder="请输入登录账号">
             <template #prefix>
               <el-icon>
                 <User />
@@ -27,7 +27,8 @@
           </el-input>
         </el-form-item>
         <!-- 登录按钮 -->
-        <el-button :loading="loading" type="primary" size="large" class="button" @click.prevent="handleLogin">{{ $t('login.login') }} </el-button>
+        <el-button :loading="loading" type="primary" size="large" class="button" @click.prevent="handleLogin">{{
+          $t('login.login') }} </el-button>
       </el-form>
     </el-card>
   </div>
@@ -37,17 +38,27 @@
 import { siteInfo } from '@/layout/site'
 // 接口
 import { LoginStore } from '@/store/api/login'
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
+const router = useRouter()
 const loginStore = LoginStore()
 const loading = ref(false) // 按钮loading
 const loginFormRef = ref({}) // 登录表单ref
 const loginData = ref({
-  username: 'admin',
-  password: '123456'
+  account: 'admin',
+  password: '1qaz2wsx',
+  type: 'Admin'
 })
-const loginRules = computed(() => {})
+const loginRules = computed(() => { })
+const toLogin = async (data) => {
+  const res = await loginStore.login(data)
+  if (res.errcode == '0') {
+    ElMessage({ message: `登录成功`, type: 'success' })
+    localStorage.setItem('token', res.data)
+    // 路由
+    router.push({ path: '/' })
+  } else {
+    ElMessage({ message: `${res.errmsg}`, type: 'error' })
+  }
+}
 /**
  * 登录
  */
@@ -55,6 +66,7 @@ function handleLogin() {
   loginFormRef.value.validate((valid) => {
     if (valid) {
       loading.value = true
+      toLogin(loginData.value)
     }
   })
 }

vite.config.js

@@ -25,7 +25,7 @@ export default defineConfig(({ mode }) => {
          */
         [env.VITE_APP_BASE_API]: {
           changeOrigin: true,
-          target: 'http://localhost:8989'
+          target: 'http://localhost:9901'
         }
       }
     },
@@ -88,7 +88,7 @@ export default defineConfig(({ mode }) => {
         'vue',
         'vue-router',
         'pinia',
-        // 'axios',
+        'axios',
         'element-plus/es/components/form/style/css',
         'element-plus/es/components/form-item/style/css',
         'element-plus/es/components/button/style/css',
@@ -139,8 +139,8 @@ export default defineConfig(({ mode }) => {
         'element-plus/es/components/watermark/style/css',
         'element-plus/es/components/config-provider/style/css',
         'vue-i18n',
-        'element-plus/es/components/text/style/css'
-        // '@vueuse/core',
+        'element-plus/es/components/text/style/css',
+        '@vueuse/core'
         // 'sortablejs',
         // 'path-to-regexp',
         // 'echarts',