From 4e9945d9a85a77362ed9215ad32106fc46702194 Mon Sep 17 00:00:00 2001 From: xhong Date: Sat, 16 Jul 2022 20:24:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=B8=8E=E4=B8=BB=E7=95=8C=E9=9D=A2=E7=9A=84?= =?UTF-8?q?=E8=BF=9E=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 3 +++ .env.production | 3 +++ src/api/request.js | 38 ++++++++++++++++++++++++++++++++++++- src/main.js | 2 ++ src/router/premission.js | 20 +++++++++++++++++++ src/store/getters.js | 5 +++++ src/store/index.js | 14 ++++---------- src/store/modules/app.js | 29 ++++++++++++++++++++++++++++ src/views/login/zdLogin.vue | 10 +++++----- vue.config.js | 37 +++++++++++++++++++++--------------- 10 files changed, 130 insertions(+), 31 deletions(-) create mode 100644 .env.development create mode 100644 .env.production create mode 100644 src/router/premission.js create mode 100644 src/store/getters.js create mode 100644 src/store/modules/app.js diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..0ea2f62 --- /dev/null +++ b/.env.development @@ -0,0 +1,3 @@ +ENV = 'development' + +VUE_APP_BASE_API = '/api' \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..fba3a6f --- /dev/null +++ b/.env.production @@ -0,0 +1,3 @@ +ENV = 'production' + +VUE_APP_BASE_API = '/prod-api' \ No newline at end of file diff --git a/src/api/request.js b/src/api/request.js index 19982a6..e086e5d 100644 --- a/src/api/request.js +++ b/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 diff --git a/src/main.js b/src/main.js index 2bebcd3..b41459e 100644 --- a/src/main.js +++ b/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) diff --git a/src/router/premission.js b/src/router/premission.js new file mode 100644 index 0000000..0682a1c --- /dev/null +++ b/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') + } + } +}) diff --git a/src/store/getters.js b/src/store/getters.js new file mode 100644 index 0000000..8f9297f --- /dev/null +++ b/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 +} diff --git a/src/store/index.js b/src/store/index.js index 7f5b89c..4caa93a 100644 --- a/src/store/index.js +++ b/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 }) diff --git a/src/store/modules/app.js b/src/store/modules/app.js new file mode 100644 index 0000000..b9b9241 --- /dev/null +++ b/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) + }) + }) + } + } +} diff --git a/src/views/login/zdLogin.vue b/src/views/login/zdLogin.vue index a5d9735..390fcbe 100644 --- a/src/views/login/zdLogin.vue +++ b/src/views/login/zdLogin.vue @@ -34,11 +34,12 @@