From 083b17d07939af29bcb04a27e564664c7280595a Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期一, 10 十月 2022 15:40:58 +0800
Subject: [PATCH] 登录验证登出
---
src/utils/request.js | 5
src/api/api.js | 15 ++
src/views/maintenance/eventlogManage.vue | 2
public/index.html | 1
src/store/index.js | 87 ++++++++++++++
public/config/config.js | 4
src/components/login.vue | 62 ++++-----
src/views/maintenance/operationLog.vue | 2
src/components/navMenu.vue | 126 ++++++++++++--------
src/router/index.js | 24 +++
src/views/maintenance/logLog.vue | 4
11 files changed, 237 insertions(+), 95 deletions(-)
diff --git a/public/config/config.js b/public/config/config.js
index c80e8a3..a2b2f29 100644
--- a/public/config/config.js
+++ b/public/config/config.js
@@ -1,5 +1,5 @@
-const BASE_URL = 'http://192.168.20.55:12316';
-// const BASE_URL = 'http://192.168.20.39:12316';
+// const BASE_URL = 'http://192.168.20.55:12316';
+const BASE_URL = 'http://192.168.20.39:12316';
var gisUrl = 'http://183.162.245.49:3301';
var ifreamUrl = 'http://192.168.20.39:12306/';
diff --git a/public/index.html b/public/index.html
index ffed6a4..438baa5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,7 @@
<script src="./SmartEarthSDK/Cesium/Cesium.js"></script>
<script src="./SmartEarthSDK/SmartEarth.min.js"></script>
<script src="./config/config.js"></script>
+ <script src="./config/rsa.min.js"></script>
<style>
.esriControlsBR {
display: none;
diff --git a/src/api/api.js b/src/api/api.js
index 7da989a..82a02b3 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -121,4 +121,19 @@
export function resOpSelectByPageAndCount(params) {
//璇锋眰鍦板潃
return request.get('/resOp/selectByPageAndCount', { params: params });
+}
+//鑾峰彇鍏挜鐢ㄤ簬鍔犲瘑
+export function getPublicKey(params) {
+ //璇锋眰鍦板潃
+ return request.get('/sign/getPublicKey', { params: params });
+}
+//鐧诲綍
+export function login(params) {
+ //璇锋眰鍦板潃
+ return request.post('/sign/login', params );
+}
+//閫�鍑虹櫥褰�
+export function logout(params) {
+ //璇锋眰鍦板潃
+ return request.get('/sign/logout', { params: params } );
}
\ No newline at end of file
diff --git a/src/components/login.vue b/src/components/login.vue
index d17c68e..eb56f17 100644
--- a/src/components/login.vue
+++ b/src/components/login.vue
@@ -78,9 +78,9 @@
ref="loginForm"
class="loginForm"
>
- <el-form-item prop="userName">
+ <el-form-item prop="uid">
<el-input
- v-model="loginForm.userName"
+ v-model="loginForm.uid"
placeholder="杈撳叆鎮ㄧ殑璐﹀彿鎴栨墜鏈哄彿"
class="nobr"
size="meddle"
@@ -90,10 +90,10 @@
></el-input>
</el-form-item>
- <el-form-item prop="password">
+ <el-form-item prop="pwd">
<el-input
show-password
- v-model="loginForm.password"
+ v-model="loginForm.pwd"
placeholder="杈撳叆鎮ㄧ殑瀵嗙爜"
class="nobr"
autocomplete="off"
@@ -141,6 +141,7 @@
background: #3b4d6e;
border-radius: 5px;
"
+ :loading="loading"
@click="submitForm('loginForm')"
>鐧诲綍</el-button
>
@@ -153,6 +154,7 @@
<script>
// import { login } from '../utils/api'
import validCode from "./verificationCode.vue";
+import { mapActions } from "vuex";
export default {
components: { validCode },
@@ -185,33 +187,24 @@
return {
validCode: "",
-
+ loading: false,
loginForm: {
- userName: "admin",
- password: "terra2022",
+ uid: "admin",
+ pwd: "Admin@123",
},
rules: {
- userName: [{ validator: validUserName, trigger: "blur" }],
- password: [{ validator: validPassword, trigger: "blur" }],
+ uid: [{ validator: validUserName, trigger: "blur" }],
+ pwd: [{ validator: validPassword, trigger: "blur" }],
validCode: [{ validator: checkValidCode, trigger: "blur" }],
},
};
- // return {
- // validCode: "",
- // form: {
- // username: "",
- // password: "",
- // },
- // rules: {
- // username: [
- // { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" },
- // ],
- // password: [{ required: true, message: "璇峰～鍐欏瘑鐮�", trigger: "blur" }],
- // },
- // };
},
- mounted() {},
+ mounted() {
+ this.getpublickey();
+ },
methods: {
+ // 鑾峰彇vuex涓瑼ctions閲岀殑鏂规硶
+ ...mapActions(["login", "getpublickey"]),
getCode(data) {
console.log(data);
this.validCode = data; //鍦╠ata涓畾涔変竴涓� validCode:'',鐢ㄦ潵璁板綍楠岃瘉鐮併��
@@ -219,8 +212,17 @@
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
- //璋冪敤褰曟帴鍙�
- this.$router.push("/catalogueManage");
+ this.loading = true;
+ this.login(this.loginForm)
+ .then(response => {
+ this.$router.push("/")
+
+ this.loading = false;
+ //璋冪敤褰曟帴鍙�
+ })
+ .catch(response => {
+ this.loading = false;
+ });
//濡傛灉鐧诲綍澶辫触锛岄渶瑕佸埛鏂伴獙璇佺爜鐨�
this.$refs.refresh.createdCode();
this.validCode = ""; //娓呯┖楠岃瘉鐮佽緭鍏ユ鐨勫唴瀹�
@@ -230,16 +232,8 @@
}
});
},
- // onSubmit() {
- // this.$refs.form.validate((valid) => {
- // if (valid) {
- // this.$router.push("/Home");
- // } else {
- // return false;
- // }
- // });
- // },
},
+ created() {},
};
</script>
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 63723ba..ba6a020 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -18,120 +18,120 @@
>
<el-submenu index="3" class="faSub">
<template slot="title">
- <span>{{ $t('synthesis.synthesis') }}</span>
+ <span>{{ $t("synthesis.synthesis") }}</span>
</template>
<el-menu-item index="Synthesis">{{
- $t('synthesis.synthesis')
+ $t("synthesis.synthesis")
}}</el-menu-item>
<el-menu-item index="Thematic">{{
- $t('synthesis.themaic')
+ $t("synthesis.themaic")
}}</el-menu-item>
<el-menu-item index="Archive">{{
- $t('synthesis.archive')
+ $t("synthesis.archive")
}}</el-menu-item>
</el-submenu>
<el-submenu index="1" class="faSub">
<template slot="title">
- <span>{{ $t('dataManage.dataManage') }}</span>
+ <span>{{ $t("dataManage.dataManage") }}</span>
</template>
<el-menu-item index="catalogueManage">{{
- $t('dataManage.catalogueManage')
+ $t("dataManage.catalogueManage")
}}</el-menu-item>
<el-menu-item index="dataUpdata">{{
- $t('dataManage.dataUpdata')
+ $t("dataManage.dataUpdata")
}}</el-menu-item>
<el-menu-item index="metadataManage">{{
- $t('dataManage.metadataManage')
+ $t("dataManage.metadataManage")
}}</el-menu-item>
<el-menu-item index="dataLoading">{{
- $t('dataManage.dataLoading')
+ $t("dataManage.dataLoading")
}}</el-menu-item>
<el-menu-item index="SpatialData">{{
- $t('dataManage.SpatialData')
+ $t("dataManage.SpatialData")
}}</el-menu-item>
<el-menu-item index="versionManage">{{
- $t('dataManage.versionManage')
+ $t("dataManage.versionManage")
}}</el-menu-item>
<el-menu-item index="dictionaryManage">{{
- $t('dataManage.dictionaryManage')
+ $t("dataManage.dictionaryManage")
}}</el-menu-item>
<el-menu-item index="styleManage">{{
- $t('dataManage.styleManage')
+ $t("dataManage.styleManage")
}}</el-menu-item>
</el-submenu>
<el-submenu index="2" class="faSub">
<template slot="title">
- <span>{{ $t('operatManage.operatManage') }}</span>
+ <span>{{ $t("operatManage.operatManage") }}</span>
</template>
<el-submenu index="2-2">
<template slot="title">{{
- $t('operatManage.systemLayout')
+ $t("operatManage.systemLayout")
}}</template>
<el-menu-item index="menuSettings">{{
- $t('operatManage.menuSettings')
+ $t("operatManage.menuSettings")
}}</el-menu-item>
<el-menu-item index="parameterConfiguration">{{
- $t('operatManage.parameterConfiguration')
+ $t("operatManage.parameterConfiguration")
}}</el-menu-item>
<el-menu-item index="rests">{{
- $t('operatManage.rests')
+ $t("operatManage.rests")
}}</el-menu-item>
</el-submenu>
<el-menu-item index="authorityManagement">{{
- $t('operatManage.authorityManagement')
+ $t("operatManage.authorityManagement")
}}</el-menu-item>
<el-menu-item index="safetyManagement">{{
- $t('operatManage.safetyManagement')
+ $t("operatManage.safetyManagement")
}}</el-menu-item>
<el-submenu index="2-5">
<template slot="title">{{
- $t('operatManage.operationMonitoring')
+ $t("operatManage.operationMonitoring")
}}</template>
<el-menu-item index="eventlogManage">{{
- $t('operatManage.ResourceLog')
+ $t("operatManage.ResourceLog")
}}</el-menu-item>
<el-menu-item index="logLog">{{
- $t('operatManage.logLog')
+ $t("operatManage.logLog")
}}</el-menu-item>
<el-menu-item index="operationLog">{{
- $t('operatManage.operationLog')
+ $t("operatManage.operationLog")
}}</el-menu-item>
<el-menu-item index="databaseMonitoring">{{
- $t('operatManage.databaseMonitoring')
+ $t("operatManage.databaseMonitoring")
}}</el-menu-item>
<el-menu-item index="systemMonitoring">{{
- $t('operatManage.systemMonitoring')
+ $t("operatManage.systemMonitoring")
}}</el-menu-item>
<el-menu-item index="blackwhiteList"
- >{{ $t('operatManage.blackwhiteList') }}
+ >{{ $t("operatManage.blackwhiteList") }}
</el-menu-item>
<el-menu-item index="tokentool">{{
- $t('operatManage.tokentool')
+ $t("operatManage.tokentool")
}}</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="4" class="faSub">
<template slot="title">
- <span>{{ $t('userManage.userManage') }}</span>
+ <span>{{ $t("userManage.userManage") }}</span>
</template>
<el-menu-item index="userInfoManage">{{
- $t('userManage.userInfoManage')
+ $t("userManage.userInfoManage")
}}</el-menu-item>
<el-menu-item index="orgManage">{{
- $t('userManage.orgManage')
+ $t("userManage.orgManage")
}}</el-menu-item>
<el-menu-item index="userAuditing">{{
- $t('userManage.userAuditing')
+ $t("userManage.userAuditing")
}}</el-menu-item>
<el-menu-item index="roleManage">{{
- $t('userManage.roleManage')
+ $t("userManage.roleManage")
}}</el-menu-item>
<el-menu-item index="groupManage">{{
- $t('userManage.groupManage')
+ $t("userManage.groupManage")
}}</el-menu-item>
<el-menu-item index="authorityManage">{{
- $t('userManage.authorityManage')
+ $t("userManage.authorityManage")
}}</el-menu-item>
</el-submenu>
<!-- <el-submenu index="5" class="faSub">
@@ -149,7 +149,7 @@
<div class="userInfo">
<img src="../assets/img/user.png" alt="" />
<span>admin</span>
- <span>娉ㄩ攢</span>
+ <span @click="logOut">娉ㄩ攢</span>
<span @click="switchLang"> 鍒囨崲璇█</span>
</div>
@@ -162,46 +162,74 @@
</template>
<script>
+import { logout } from "@/api/api";
+import { removeToken,getToken } from "@/utils/auth";
export default {
- name: 'navMenu',
+ name: "navMenu",
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
data() {
return {
- lang: 'en',
+ lang: "en",
};
},
methods: {
+ logOut() {
+ this.$confirm("纭鏄惁閫�鍑虹櫥褰�?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await logout({token:getToken()});
+ console.log(data);
+ if (data.code != 200) {
+ return this.$message.error("閫�鍑虹櫥褰曞け璐�");
+ }
+ removeToken();
+ this.$router.push("/login");
+ this.$message({
+ message: "閫�鍑虹櫥褰曟垚鍔�",
+ type: "success",
+ });
+ })
+ .catch(() => {
+ this.$message({
+ type: "info",
+ message: "宸插彇娑�",
+ });
+ });
+ },
handleOpen(key, keyPath) {
if (
- keyPath[1] != 'dataLoading' &&
- keyPath[1] != '2-2' &&
- keyPath[1] != '2-5'
+ keyPath[1] != "dataLoading" &&
+ keyPath[1] != "2-2" &&
+ keyPath[1] != "2-5"
)
this.$router.push(keyPath[1]);
},
handleClose(key, keyPath) {
if (
- keyPath[1] != 'dataLoading' &&
- keyPath[1] != '2-5' &&
- keyPath[1] != '2-2'
+ keyPath[1] != "dataLoading" &&
+ keyPath[1] != "2-5" &&
+ keyPath[1] != "2-2"
)
this.$router.push(keyPath[1]);
},
handleselect(index) {
if (index != null) {
- this.$emit('shwoMapView', false);
+ this.$emit("shwoMapView", false);
}
},
showChange() {
- this.$emit('shwoMapView', true);
+ this.$emit("shwoMapView", true);
},
switchLang() {
- if (this.lang == 'en') {
+ if (this.lang == "en") {
this.$i18n.locale = this.lang;
- this.lang = 'zh';
+ this.lang = "zh";
} else {
this.$i18n.locale = this.lang;
- this.lang = 'en';
+ this.lang = "en";
}
},
},
diff --git a/src/router/index.js b/src/router/index.js
index 01e68dd..27fcf41 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,6 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
+import { getToken } from "@/utils/auth"; // get token from cookie
import Home from '../views/Home.vue';
import login from '../components/login';
import Synthesis from '../views/Synthesis/index.vue'; //缁煎悎灞曠ず
@@ -41,14 +42,15 @@
const routes = [
{
- path: '/',
+ path: '/login',
name: 'login',
component: login,
},
{
- path: '/Home',
+ path: '/',
name: 'Home',
component: Home,
+ redirect: "/Synthesis",
children: [
{
path: '/Synthesis',
@@ -333,5 +335,21 @@
const router = new VueRouter({
routes,
});
-
+//璺敱瀹堝崼
+router.beforeEach((to, from, next) => {
+ next();
+ if (to.matched.some((auth) => auth.meta.requireAuth)) {
+ // 鑾峰彇token
+ let token = getToken();
+ if (token) {
+ next();
+ } else {
+ next({
+ path: "/login",
+ });
+ }
+ } else {
+ next();
+ }
+});
export default router;
diff --git a/src/store/index.js b/src/store/index.js
index 8fac372..088eb10 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,10 @@
import Vue from 'vue';
import Vuex from 'vuex';
+import { getToken, setToken, removeToken } from "@/utils/auth";
+import { Loading, Message } from "element-ui";
+import { login, getPublicKey } from "@/api/api";
+var encrypt = new JSEncrypt();
Vue.use(Vuex);
export default new Vuex.Store({
@@ -11,6 +15,12 @@
verCateNodes: {},
styleDirCateNodes: {},
styleDepCateNodes: {},
+ token: getToken(),
+ //璇锋眰璁℃暟
+ apiCount: 0,
+ //loading瀹炰緥
+ loadingInstance: null,
+ key: null
},
mutations: {
// 鑾峰彇瀹屾暣闈㈠寘灞戣矾寰�
@@ -34,7 +44,82 @@
styleDirChangeNode(state, msg) {
state.styleDirCateNodes = msg;
},
+ /* 鎵撳紑Loading */
+ START_LOADING(state, msg) {
+ state.loadingInstance = Loading.service({
+ lock: true,
+ text: msg ? msg : "鍔犺浇涓�...",
+ background: "rgba(0, 0, 0, 0.7)",
+ });
+ },
+ /* 鍏抽棴loading */
+
+ CLOSE_LOADING(state) {
+ state.loadingInstance.close();
+ },
+ /* 鏇存柊璇锋眰绾跨▼姹� */
+ UPDATE_API_COUNT(state, handle) {
+ if (handle == "add") {
+ state.apiCount++;
+ this.commit("START_LOADING");
+ } else {
+ state.apiCount--;
+ if (state.apiCount <= 0) {
+ this.commit("CLOSE_LOADING");
+ }
+ }
+ },
+ SET_TOKEN(state, token) {
+ state.token = token;
+ },
+
+ SET_KEY(state, key) {
+ state.key = key;
+ },
},
- actions: {},
+ actions: {
+ // 鐢ㄦ埛鐧诲綍 login
+ login({ commit, state }, userInfo) {
+ return new Promise((resolve, reject) => {
+ var data = {
+ uid: encrypt.encrypt(userInfo.uid),
+ pwd: encrypt.encrypt(userInfo.pwd)
+ };
+ login(data)
+ .then((response) => {
+ const data = response;
+ if (data.code !== 200) {
+ return Message({
+ message: data.msg,
+ type: "error",
+ duration: 5 * 1000,
+ });
+ }
+ commit("SET_TOKEN", data.result.token);
+ setToken(data.result.token);
+ resolve(data);
+ })
+ .catch((error) => {
+ reject(error);
+ });
+ });
+ },
+ getpublickey({ commit, state }, userInfo) {
+
+ return new Promise((resolve, reject) => {
+ getPublicKey(userInfo)
+ .then((response) => {
+ const data = response;
+ commit("SET_KEY", data.result);
+
+ encrypt.setPublicKey(data.result); // 璁剧疆鍏挜
+ resolve();
+ })
+ .catch((error) => {
+ reject(error);
+ });
+ });
+ }
+ },
modules: {},
});
diff --git a/src/utils/request.js b/src/utils/request.js
index f776688..763f121 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -24,8 +24,9 @@
service.interceptors.request.use(
(config) => {
// 璇锋眰鎼哄甫token
- if (store.getters.token) {
- config.headers["X-Token"] = getToken();
+ let token = getToken();
+ if (token) {
+ config.headers["token"] = token;
}
//鍔犺浇loading
store.commit("UPDATE_API_COUNT", "add");
diff --git a/src/views/maintenance/eventlogManage.vue b/src/views/maintenance/eventlogManage.vue
index e25bacb..aaeca4e 100644
--- a/src/views/maintenance/eventlogManage.vue
+++ b/src/views/maintenance/eventlogManage.vue
@@ -232,7 +232,7 @@
const data = await resOpSelectByPageAndCount(this.listData);
console.log(data);
if (data.code != 200) {
- this.$message.error("鍒楄〃璋冪敤澶辫触");
+ return this.$message.error("鍒楄〃璋冪敤澶辫触");
}
this.tableData = data.result;
this.count = data.count;
diff --git a/src/views/maintenance/logLog.vue b/src/views/maintenance/logLog.vue
index 378f437..ca69d92 100644
--- a/src/views/maintenance/logLog.vue
+++ b/src/views/maintenance/logLog.vue
@@ -219,9 +219,9 @@
},
async getList() {
const data = await loginSelectByPageAndCount(this.listData);
- console.log(data);
+
if (data.code != 200) {
- this.$message.error("鍒楄〃璋冪敤澶辫触");
+ return this.$message.error("鍒楄〃璋冪敤澶辫触");
}
this.tableData = data.result;
this.count = data.count;
diff --git a/src/views/maintenance/operationLog.vue b/src/views/maintenance/operationLog.vue
index 5c17742..fd1a4b1 100644
--- a/src/views/maintenance/operationLog.vue
+++ b/src/views/maintenance/operationLog.vue
@@ -244,7 +244,7 @@
const data = await operateSelectByPageAndCount(this.listData);
console.log(data);
if (data.code != 200) {
- this.$message.error("鍒楄〃璋冪敤澶辫触");
+ return this.$message.error("鍒楄〃璋冪敤澶辫触");
}
this.tableData = data.result;
this.count = data.count;
--
Gitblit v1.9.3