From cad0535f3fb14ff09db99ec43169da3aa33b83f2 Mon Sep 17 00:00:00 2001
From: chenyibo <p-honggang.li@pcitc.com>
Date: 星期二, 30 三月 2021 16:06:08 +0800
Subject: [PATCH] 1.新增登录界面
---
src/router/map.js | 4
src/store/modules/user.js | 149 ++++++++++++++++
src/utils/navigation.js | 167 ++++++++++++++++++
src/api/host.js | 6
src/store/index.js | 4
src/api/mapApi.js | 9
.env | 2
src/assets/images/login-page/page1.jpg | 0
.env.test | 2
src/api/mapUrl.js | 8
src/utils/tools.js | 11 +
src/router/index.js | 29 ++
src/views/Login.vue | 124 +++++++++++++
src/api/index.js | 5
src/main.js | 3
src/utils/axios.js | 5
.env.production | 2
src/app.config.js | 2
18 files changed, 503 insertions(+), 29 deletions(-)
diff --git a/.env b/.env
index 7b05847..d4d1f4c 100644
--- a/.env
+++ b/.env
@@ -2,7 +2,7 @@
NODE_ENV=development
#vue椤圭洰 灞炴�у悕蹇呴』浠UE_APP_寮�澶达紝姣斿VUE_APP_XXX
VUE_APP_MOCK=true
-VUE_APP_API_HOST=http://localhost:8080/
+VUE_APP_API_HOST=http://xearth.cn:3000
VUE_APP_API_TOKEN_URL=https://auth.uat.siam.sinopec.com/
VUE_APP_API_BASE_URL=/api
VUE_APP_CLIENT_ID=no_apply
diff --git a/.env.production b/.env.production
index eccd272..75961f6 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
# .env
NODE_ENV=production
VUE_APP_MOCK=false
-VUE_APP_API_HOST=http://localhost:8080/
+VUE_APP_API_HOST=http://localhost:3000/
VUE_APP_API_BASE_URL=/api
VUE_APP_API_TOKEN_URL=https://oauth.siam.sinopec.com/
VUE_APP_CLIENT_ID=no_apply
diff --git a/.env.test b/.env.test
index dc697e7..f5a8555 100644
--- a/.env.test
+++ b/.env.test
@@ -1,7 +1,7 @@
# .env
NODE_ENV=test
VUE_APP_MOCK=false
-VUE_APP_API_HOST=http://localhost:8080/
+VUE_APP_API_HOST=http://localhost:3000/
VUE_APP_API_TOKEN_URL=https://auth.uat.siam.sinopec.com/
VUE_APP_API_BASE_URL=/api
VUE_APP_CLIENT_ID=no_apply
diff --git a/src/api/host.js b/src/api/host.js
new file mode 100644
index 0000000..d2b8228
--- /dev/null
+++ b/src/api/host.js
@@ -0,0 +1,6 @@
+/**
+ * 鏈嶅姟HOST瀹氫箟
+ */
+import { getSchemeHost } from '../utils/tools'
+
+export const $HOST = getSchemeHost()
diff --git a/src/api/index.js b/src/api/index.js
index 1df9919..62f9063 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,7 +1,4 @@
import * as mapApi from './mapApi'
import * as mapUrl from './mapUrl'
-export default {
- mapApi,
- mapUrl
-}
+export default Object.assign({}, mapApi, mapUrl)
diff --git a/src/api/mapApi.js b/src/api/mapApi.js
index 3cde8cb..7376708 100644
--- a/src/api/mapApi.js
+++ b/src/api/mapApi.js
@@ -3,13 +3,12 @@
// const $HOST = 'http://10.238.221.113'
// 娴嬭瘯鐜IP锛歨ttp://10.238.221.113
import axios from '@utils/axios'
+import * as mapUrl from './mapUrl'
/**
* 璇ユ柟娉曢厤缃�
*/
-class MapAPI {
- getToken (param) {
- axios.get(param.url, param.option)
+export default {
+ getUser (data) {
+ return axios.get(mapUrl.GetUser, data)
}
}
-
-export default new MapAPI()
diff --git a/src/api/mapUrl.js b/src/api/mapUrl.js
index bc905e4..f5f7815 100644
--- a/src/api/mapUrl.js
+++ b/src/api/mapUrl.js
@@ -1,10 +1,6 @@
/**
* 璇ユ枃浠堕厤缃帴鍙ｇ殑URL鍦板潃
*/
-class ApiURLs {
- constructor () {
- this.APIURL_HELLOWORLD = 'http://www.baidu.com'
- }
-}
+import { $HOST } from './host'
-export default new ApiURLs()
+export const GetUser = $HOST + '/user/getUser'
diff --git a/src/app.config.js b/src/app.config.js
index cf2a95f..295d938 100644
--- a/src/app.config.js
+++ b/src/app.config.js
@@ -11,7 +11,7 @@
developmentOff: true // 璁句负true鍚庡湪寮�鍙戠幆澧冧笉浼氭敹闆嗛敊璇俊鎭�
}
},
- homeRouterName: 'Home',
+ homeRouterName: 'mapTemplate',
loginRouteName: 'Login',
routeMode: 'history',
tagNavCache: false,
diff --git a/src/assets/images/login-page/page1.jpg b/src/assets/images/login-page/page1.jpg
new file mode 100644
index 0000000..96be519
--- /dev/null
+++ b/src/assets/images/login-page/page1.jpg
Binary files differ
diff --git a/src/main.js b/src/main.js
index f174d4a..da699b5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,12 +15,13 @@
import '@/utils/dialogDrag.js'
import '@components/plugin/leaflet-measure-path/leaflet-measure-path.css'
import '@components/plugin/leaflet-measure-path/leaflet-measure-path'
-
+const appConfig = require('@/app.config')
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.prototype.$cancels = []
Vue.prototype.L = L
+Vue.prototype.$config = appConfig
// 娉ㄥ唽鎸囦护7
// registerDirectives(Vue)
diff --git a/src/router/index.js b/src/router/index.js
index 32dae04..6bc1550 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,11 @@
import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './routes'
+import { getToken } from '@/utils/navigation'
import 'nprogress/nprogress.css'
const appConfig = require('@/app.config')
-const { routeMode } = appConfig
-
+const { homeRouterName, loginRouteName, routeMode } = appConfig
+const LOGIN_PAGE_ROUTE_NAME = loginRouteName
Vue.use(Router)
const baseName = process.env.NODE_ENV === 'production' ? `/${appConfig.projectName}/` : '/'
const router = new Router({
@@ -17,12 +18,32 @@
cancel()
})
Vue.prototype.$cancels = []
+ const token = getToken()
+ if (!token && to.name !== LOGIN_PAGE_ROUTE_NAME) {
+ // 鏈櫥褰曚笖瑕佽烦杞殑椤甸潰涓嶆槸鐧诲綍椤�
+ next({
+ name: LOGIN_PAGE_ROUTE_NAME // 璺宠浆鍒扮櫥褰曢〉
+ })
+ } else if (!token && to.name === LOGIN_PAGE_ROUTE_NAME) {
+ // 鏈櫥闄嗕笖瑕佽烦杞殑椤甸潰鏄櫥褰曢〉
+ next() // 璺宠浆
+ } else if (token && to.name === LOGIN_PAGE_ROUTE_NAME) {
+ // 宸茬櫥褰曚笖瑕佽烦杞殑椤甸潰鏄櫥褰曢〉
+ next({
+ name: homeRouterName // 璺宠浆鍒癶omeName椤�
+ })
+ } else if (!token) {
+ next({
+ name: LOGIN_PAGE_ROUTE_NAME // 璺宠浆鍒扮櫥褰曢〉
+ })
+ } else {
+ next()
+ }
// 涓嶉渶瑕佺櫥褰曡璇佺殑璺敱
if (Object.hasOwnProperty.call(to.meta, 'noLoginIdentify') && to.meta.noLoginIdentify) {
next()
- return
}
- next()
+ // next()
})
router.beforeResolve((to, from, next) => {
next()
diff --git a/src/router/map.js b/src/router/map.js
index 9372783..328884b 100644
--- a/src/router/map.js
+++ b/src/router/map.js
@@ -9,8 +9,10 @@
* }
*/
const MapTemplate = (r) => require.ensure([], () => r(require('../views/MapTemplate')), 'frame')
+const Login = (r) => require.ensure([], () => r(require('../views/Login')), 'frame')
const routes = [
- { path: '/mapTemplate', name: 'MapTemplate', meta: { statusBgc: 0 }, component: MapTemplate }
+ { path: '/mapTemplate', name: 'MapTemplate', meta: { statusBgc: 0 }, component: MapTemplate },
+ { path: '/Login', name: 'Login', meta: { statusBgc: 0 }, component: Login }
]
// 鎵�鏈変笂闈㈠畾涔夌殑璺敱閮借鍐欏湪涓嬮潰鐨剅outes閲�
diff --git a/src/store/index.js b/src/store/index.js
index 1b3e167..2d18c38 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,7 @@
import Vue from 'vue'
import Vuex from 'vuex'
import map from './modules/map'
+import user from './modules/user'
// import app from './modules/app'
Vue.use(Vuex)
@@ -13,6 +14,7 @@
},
modules: {
// app,
- map
+ map,
+ user
}
})
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
new file mode 100644
index 0000000..57ed576
--- /dev/null
+++ b/src/store/modules/user.js
@@ -0,0 +1,149 @@
+import $API from '../../api'
+import $http from '@/utils/axios'
+import { setToken, getToken, setAccount, getAccount } from '@/utils/navigation'
+// import { replaceUrlParams } from '@/utils/tools'
+
+const state = {
+ account: '',
+ userName: '',
+ userId: '',
+ avator: '',
+ orgUnitName: '',
+ orgUnitCode: '',
+ orgUnitLevel: '',
+ orgSectorName: '',
+ orgSectorCode: '',
+ isAdmin: null,
+ token: getToken(),
+ access: 0,
+ hasGetInfo: false
+}
+
+const mutations = {
+ setAvator (state, avator) {
+ state.avator = avator
+ },
+ setUserId (state, id) {
+ state.userId = id
+ },
+ setAccount (state, account) {
+ state.account = account
+ setAccount(account)
+ },
+ setUserName (state, name) {
+ state.userName = name
+ },
+ setOrgUnitName (state, orgUnitName) {
+ state.orgUnitName = orgUnitName
+ },
+ setOrgUnitCode (state, orgUnitCode) {
+ state.orgUnitCode = orgUnitCode
+ },
+ setOrgSectorName (state, orgSectorName) {
+ state.orgSectorName = orgSectorName
+ },
+ setOrgSectorCode (state, orgSectorCode) {
+ state.orgSectorCode = orgSectorCode
+ },
+ setOrgUnitLevel (state, orgUnitLevel) {
+ state.orgUnitLevel = orgUnitLevel
+ },
+ setAdmin (state, isAdmin) {
+ state.isAdmin = isAdmin
+ },
+ setAccess (state, access) {
+ state.access = access
+ },
+ setToken (state, token) {
+ state.token = token
+ setToken(token)
+ },
+ setHasGetInfo (state, status) {
+ state.hasGetInfo = status
+ }
+}
+
+const actions = {
+ // 鐧诲綍
+ handleLogin ({ commit }, { account, password }) {
+ return new Promise((resolve, reject) => {
+ $http.post($API.GetUser, {
+ userName: account,
+ passWord: password
+ }).then(data => {
+ console.log(data)
+ commit('setToken', '12345668')
+ commit('setAccount', account)
+ resolve()
+ }).catch(err => {
+ reject(err)
+ })
+ })
+ },
+ // 閫�鍑虹櫥褰�
+ handleLogOut ({ state, commit }) {
+ return new Promise((resolve, reject) => {
+ commit('setToken', '')
+ commit('setAccount', '')
+ commit('setAccess', 0)
+ resolve()
+ })
+ },
+ // 鑾峰彇鐢ㄦ埛淇℃伅
+ getUserInfo ({ state, commit, dispatch }) {
+ const account = getAccount() || 'admin'
+ return new Promise((resolve, reject) => {
+ try {
+ $http.get($API.AAA_GET_USER_INFO, {
+ token: state.token
+ }).then(response => {
+ const data = response.data
+ commit('setAvator', data.avator)
+ // commit('setOrgUnitName', data.orgUnitName)
+ // commit('setOrgUnitCode', data.orgUnitCode)
+ commit('setUserId', data.userId)
+ commit('setAccess', data.access)
+ commit('setHasGetInfo', true)
+ if (account === 'tianjun') {
+ // admin鐨勫満鏅蛋mock
+ commit('setAccount', data.account)
+ commit('setUserName', data.userName)
+ resolve(data)
+ } else {
+ $http.get($API.MDM_GET_USER_ACCOUNT_DETAIL, {
+ account: account
+ }).then(response => {
+ const d = response.data
+ if (d) {
+ commit('setAccount', d.unifiedIdentityAcc)
+ commit('setUserName', d.userName)
+ // 鑾峰彇鐢ㄦ埛鍚庯紝鑾峰彇缁勭粐鏈烘瀯
+ dispatch('getUserOrgInfo').then(() => {
+ resolve(d)
+ }).catch(err => {
+ alert('涓嶈兘鑾峰彇鐢ㄦ埛缁勭粐鏈烘瀯')
+ reject(err)
+ })
+ } else {
+ commit('setToken', '')
+ commit('setAccount', '')
+ commit('setAccess', 0)
+ resolve(false)
+ }
+ })
+ }
+ }).catch(err => {
+ reject(err)
+ })
+ } catch (error) {
+ reject(error)
+ }
+ })
+ }
+}
+
+export default {
+ state,
+ mutations,
+ actions
+}
diff --git a/src/utils/axios.js b/src/utils/axios.js
index a5bb1ab..b28575e 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -140,12 +140,13 @@
Service.interceptors.response.use(
response => {
const res = response.data
- if (Number(res.code) !== 200 && Number(res.code) !== 0) {
+ /* if (Number(res.code) !== 200 && Number(res.code) !== 0) {
$T.warning(res.message)
return Promise.reject(res.message)
} else {
return res
- }
+ } */
+ return res
},
error => {
if (error.message && error.message.includes('timeout')) {
diff --git a/src/utils/navigation.js b/src/utils/navigation.js
new file mode 100644
index 0000000..1c09633
--- /dev/null
+++ b/src/utils/navigation.js
@@ -0,0 +1,167 @@
+import Cookies from 'js-cookie'
+const appConfig = require('@/app.config')
+const { cookieExpires } = appConfig
+
+export const TOKEN_KEY = 'token'
+export const ACCOUNT_KEY = 'account'
+export const setToken = (token) => {
+ Cookies.set(TOKEN_KEY, token, { expires: cookieExpires || 1 })
+}
+
+export const getToken = () => {
+ const token = Cookies.get(TOKEN_KEY)
+ if (token !== 'undefined') return token
+ else return false
+}
+
+export const setAccount = (account) => {
+ Cookies.set(ACCOUNT_KEY, account, { expires: cookieExpires || 1 })
+}
+
+export const getAccount = () => {
+ const account = Cookies.get(ACCOUNT_KEY)
+ if (account) return account
+ else return false
+}
+
+export const hasChild = (item) => {
+ return item.children && item.children.length !== 0
+}
+
+/**
+ * @description 鏈湴瀛樺偍鍜岃幏鍙栨爣绛惧鑸垪琛�
+ */
+export const setTagNavListToLocalstorage = list => {
+ localStorage.tagNaveList = JSON.stringify(list)
+}
+
+/**
+ * @returns {Array} 鍏朵腑鐨勬瘡涓厓绱犲彧鍖呭惈璺敱鍘熶俊鎭腑鐨刵ame, path, meta涓夐」
+ */
+export const getTagNavListFromLocalstorage = () => {
+ const list = localStorage.tagNaveList
+ return list ? JSON.parse(list) : []
+}
+
+/**
+ * @param {Array} routers 璺敱鍒楄〃鏁扮粍
+ * @description 鐢ㄤ簬鎵惧埌璺敱鍒楄〃涓璶ame涓篽ome鐨勫璞�
+ */
+export const getHomeRouter = (routers, homeName = 'Home') => {
+ let i = -1
+ const len = routers.length
+ let homeRoute = {}
+ while (++i < len) {
+ const item = routers[i]
+ if (item.children && item.children.length) {
+ const res = getHomeRouter(item.children, homeName)
+ if (res.name) return res
+ } else {
+ if (item.name === homeName) homeRoute = item
+ }
+ }
+ return homeRoute
+}
+
+/**
+ * @param {*} list 鐜版湁鏍囩瀵艰埅鍒楄〃
+ * @param {*} newRoute 鏂版坊鍔犵殑璺敱鍘熶俊鎭璞�
+ * @description 濡傛灉璇ewRoute宸茬粡瀛樺湪鍒欎笉鍐嶆坊鍔�
+ */
+export const getNewTagList = (list, newRoute) => {
+ const { name, path, meta } = newRoute
+ const newList = [...list]
+ if (newList.findIndex(item => item.name === name) >= 0) return newList
+ else newList.push({ name, path, meta })
+ return newList
+}
+
+/**
+ * @param {Number} times 鍥炶皟鍑芥暟闇�瑕佹墽琛岀殑娆℃暟
+ * @param {Function} callback 鍥炶皟鍑芥暟
+ */
+export const doCustomTimes = (times, callback) => {
+ let i = -1
+ while (++i < times) {
+ callback(i)
+ }
+}
+
+export const findNodeUpper = (ele, tag) => {
+ if (ele.parentNode) {
+ if (ele.parentNode.tagName === tag.toUpperCase()) {
+ return ele.parentNode
+ } else {
+ return findNodeUpper(ele.parentNode, tag)
+ }
+ }
+}
+
+export const findNodeUpperByClasses = (ele, classes) => {
+ const parentNode = ele.parentNode
+ if (parentNode) {
+ const classList = parentNode.classList
+ if (classList && classes.every(className => classList.contains(className))) {
+ return parentNode
+ } else {
+ return findNodeUpperByClasses(parentNode, classes)
+ }
+ }
+}
+
+export const findNodeDownward = (ele, tag) => {
+ const tagName = tag.toUpperCase()
+ if (ele.childNodes.length) {
+ let i = -1
+ const len = ele.childNodes.length
+ while (++i < len) {
+ const child = ele.childNodes[i]
+ if (child.tagName === tagName) return child
+ else return findNodeDownward(child, tag)
+ }
+ }
+}
+
+export const localSave = (key, value) => {
+ localStorage.setItem(key, value)
+}
+
+export const localRead = (key) => {
+ return localStorage.getItem(key) || ''
+}
+
+// scrollTop animation
+export const scrollTop = (el, from = 0, to, duration = 500, endCallback) => {
+ if (!window.requestAnimationFrame) {
+ window.requestAnimationFrame = (
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function (callback) {
+ return window.setTimeout(callback, 1000 / 60)
+ }
+ )
+ }
+ const difference = Math.abs(from - to)
+ const step = Math.ceil(difference / duration * 50)
+
+ const scroll = (start, end, step) => {
+ if (start === end) {
+ endCallback && endCallback()
+ return
+ }
+
+ let d = (start + step > end) ? end : start + step
+ if (start > end) {
+ d = (start - step < end) ? end : start - step
+ }
+
+ if (el === window) {
+ window.scrollTo(d, d)
+ } else {
+ el.scrollTop = d
+ }
+ window.requestAnimationFrame(() => scroll(d, end, step))
+ }
+ scroll(from, to, step)
+}
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 0838a7f..f47703e 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -25,7 +25,16 @@
})
return arr
}
-
+/**
+ * 鏍规嵁涓嶅悓鐨勫崗璁紝鏇挎崲env閰嶇疆鏂囦欢涓殑URL鍗忚
+ *
+ * @return {String}
+ */
+export function getSchemeHost () {
+ const protocol = window.location.protocol
+ const host = process.env.VUE_APP_API_HOST
+ return host.replace(/scheme/g, protocol)
+}
/**
* collection鏁版嵁杞崲涓烘爣鍑咼SON
* @param obj collection鏁版嵁
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..6d8a076
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,124 @@
+<template>
+ <div class="login-wrap" @keydown.enter="handleSubmit">
+ <div class="content">
+ <el-card class="box-card">
+ <div slot="header" class="login-title clearfix">
+ <el-icon name="star-on"></el-icon>
+ <span>娆㈣繋鐧诲綍</span>
+ </div>
+
+ <div class="form-content">
+ <el-form :model="form" :rules="formRules" ref="loginForm" class="demo-ruleForm">
+ <el-form-item prop="account">
+ <el-input size="small" v-model="form.account" placeholder="璇疯緭鍏ョ敤鎴峰悕">
+ <el-button slot="prepend" icon="el-icon-search" style="padding: 12px 10px;"></el-button>
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input size="small" type="password" v-model="form.password" auto-complete="off"
+ placeholder="璇疯緭鍏ュ瘑鐮�">
+ <el-button slot="prepend" icon="el-icon-search" style="padding: 12px 10px;"></el-button>
+ </el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button size="small" type="primary" @click="handleSubmit" style="width: 100%">鐧诲綍
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ <p class="login-tip">杈撳叆浠绘剰鐢ㄦ埛鍚嶅拰瀵嗙爜鍗冲彲</p>
+ </el-card>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+ name: 'Login',
+ components: {},
+ data () {
+ return {
+ form: {
+ account: 'admin',
+ password: 'admin'
+ },
+ formRules: {
+ account: [
+ { required: true, message: '璐﹀彿涓嶈兘涓虹┖', trigger: 'blur' }
+ ],
+ password: [
+ { required: true, message: '瀵嗙爜涓嶈兘涓虹┖', trigger: 'blur' }
+ ]
+ }
+ }
+ },
+ methods: {
+ ...mapActions([
+ 'handleLogin',
+ 'getUserInfo'
+ ]),
+ handleSubmit () {
+ this.$refs.loginForm.validate((valid) => {
+ if (valid) {
+ this.handleLogin({
+ account: this.form.account,
+ password: this.form.password
+ }).then(response => {
+ this.$router.push({
+ name: this.$config.homeRouterName
+ })
+ })
+ }
+ })
+ }
+ }
+}
+</script>
+
+<style lang="less">
+ .login-wrap {
+ position: relative;
+ background-image: url('../assets/images/login-page/page1.jpg');
+ background-size: cover;
+ background-position: center;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+
+ .content {
+ position: absolute;
+ right: 160px;
+ top: 25%;
+ }
+ .box-card {
+ width: 300px;
+ }
+ .clearfix:before,
+ .clearfix:after {
+ display: table;
+ content: "";
+ }
+ .clearfix:after {
+ clear: both
+ }
+ .form-content {
+ padding: 10px 0 0;
+ }
+ .login-title {
+ width: 100%;
+ font-size: 14px;
+ color: #1c2438;
+ font-weight: 700;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .login-tip {
+ font-size: 10px;
+ text-align: center;
+ color: #c3c3c3;
+ }
+ }
+</style>
--
Gitblit v1.8.0