feat: 完成登录界面与主界面的连接

.env.development

@@ -0,0 +1,3 @@
+ENV = 'development'
+
+VUE_APP_BASE_API = '/api'

.env.production

@@ -0,0 +1,3 @@
+ENV = 'production'
+
+VUE_APP_BASE_API = '/prod-api'

src/api/request.js

@@ -1,5 +1,7 @@
 // 导入 axios
 import axios from 'axios'
+// 引入 ElMessage 消息提示
+import { ElMessage } from 'element-plus'
 // axios 基础配置
 const service = axios.create({
   // 基础路径
@@ -7,5 +9,39 @@ const service = axios.create({
   // 超时时间
   timeout: 5000
 })
-// 导入以供外界使用
+
+// 响应拦截器
+service.interceptors.response.use(
+  // 请求响应时
+  (response) => {
+    const { data, meta } = response.data
+    if (meta.status === 200 || meta.status === 201) {
+      return data
+    } else {
+      // meta.msg = '拦截器出错'
+      ElMessage.error(meta.msg)
+      return Promise.reject(new Error(meta.msg))
+    }
+  },
+  // 无响应时
+  (error) => {
+    // console.log(error.response)
+    error.response.data = '后端服务器无响应或者URL错误'
+    error.response && ElMessage.error(error.response.data)
+    return Promise.reject(new Error(error.response.data))
+  }
+)
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    config.headers.Authorization = localStorage.getItem('token')
+    return config
+  },
+  (error) => {
+    return Promise.reject(new Error(error))
+  }
+)
+
+// 导出以供外界使用
 export default service

src/main.js

@@ -5,6 +5,8 @@ import store from './store'
 import '@/styles/index.scss'
 import SvgIcon from '@/icons/iconIndex'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import 'element-plus/dist/index.css'
+import '@/router/premission'
 
 const app = createApp(App)
 SvgIcon(app)

src/router/premission.js

@@ -0,0 +1,20 @@
+import router from './index'
+import store from '@/store'
+
+// 白名单 无登录时可访问
+const whiteList = ['/login']
+router.beforeEach((to, from, next) => {
+  if (store.getters.token) {
+    if (to.path === '/login') {
+      next('/')
+    } else {
+      next()
+    }
+  } else {
+    if (whiteList.includes(to.path)) {
+      next()
+    } else {
+      next('/login')
+    }
+  }
+})

src/store/getters.js

@@ -0,0 +1,5 @@
+export default {
+  token: (state) => state.app.token,
+  siderType: (state) => state.app.siderType,
+  lang: (state) => state.app.lang
+}

src/store/index.js

@@ -1,14 +1,8 @@
 import { createStore } from 'vuex'
+import app from './modules/app'
+import getters from './getters'
 
 export default createStore({
-  state: {
-  },
-  getters: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+  modules: { app },
+  getters
 })

src/store/modules/app.js

@@ -0,0 +1,29 @@
+import { login as loginApi } from '@/api/login'
+import router from '@/router'
+
+export default {
+  namespaced: true,
+  state: () => ({ token: localStorage.getItem('token') || '' }),
+  mutations: {
+    setToken(state, token) {
+      state.token = token
+      localStorage.setItem('token', token)
+    }
+  },
+  actions: {
+    login({ commit }, userInfo) {
+      return new Promise((resolve, reject) => {
+        loginApi(userInfo)
+          .then((res) => {
+            console.log(res)
+            commit('setToken', res.token)
+            router.replace('/')
+            resolve()
+          })
+          .catch((err) => {
+            reject(err)
+          })
+      })
+    }
+  }
+}

src/views/login/zdLogin.vue

@@ -34,11 +34,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { login } from '@/api/login'
+import { useStore } from 'vuex'
+const store = useStore()
 // 默认显示账密
 const form = ref({
-  username: '123456',
-  password: '1111',
+  username: 'admin',
+  password: '123456',
   nametips: '请输入用户名',
   pwdtips: '请输入密码'
 })
@@ -64,8 +65,7 @@ const formRef = ref(null)
 const handleLogin = () => {
   formRef.value.validate(async (valid) => {
     if (valid) {
-      const res = await login(form.value)
-      console.log(res)
+      store.dispatch('app/login', form.value)
     } else {
       console.log('error submit!')
       return false

vue.config.js

@@ -1,8 +1,3 @@
-// const { defineConfig } = require('@vue/cli-service')
-// module.exports = defineConfig({
-//   transpileDependencies: true
-// })
-
 const AutoImport = require('unplugin-auto-import/webpack')
 const Components = require('unplugin-vue-components/webpack')
 const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
@@ -75,15 +70,27 @@ module.exports = {
   },
   devServer: {
     https: false,
-    hot: false
-    // proxy: {
-    //   '/api': {
-    //     target: 'http://118.31.125.74:8000/admin/',
-    //     changeOrigin: true,
-    //     pathRewrite: {
-    //       '^/api': ''
-    //     }
-    //   }
-    // }
+    hot: false,
+    proxy: {
+      '/api': {
+        // 网上找的模拟接口
+        target: 'https://lianghj.top:8888/api/private/v1/',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    }
   }
+  // css: {
+  //   loaderOptions: {
+  //     sass: {
+  //       // 8版本用prependData:
+  //       prependData: `
+  //         @import "@/styles/variables.scss";  // scss文件地址
+  //         @import "@/styles/mixin.scss";     // scss文件地址
+  //       `
+  //     }
+  //   }
+  // }
 }