0412dfcd by yangwei

自定义登录

1 parent 69c583cc
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-06-02 09:47:57 4 * @LastEditTime: 2023-06-20 09:56:19
5 --> 5 -->
6 <!DOCTYPE html> 6 <!DOCTYPE html>
7 <html> 7 <html>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 cloudEnable: false, 22 cloudEnable: false,
23 baseUrl: location.origin || location.protocol + '//' + location.host, 23 baseUrl: location.origin || location.protocol + '//' + location.host,
24 // 是否启用单点登录 24 // 是否启用单点登录
25 casEnable: true, 25 casEnable: false,
26 // cas 基地址 26 // cas 基地址
27 casBaseURL: 'http://192.168.2.38/cas', 27 casBaseURL: 'http://192.168.2.38/cas',
28 services: { 28 services: {
......
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
25 import { mapGetters } from 'vuex' 25 import { mapGetters } from 'vuex'
26 import NoticeBar from '@/components/NoticeBar/index' 26 import NoticeBar from '@/components/NoticeBar/index'
27 import { getHomeNoticeList } from "@/api/home" 27 import { getHomeNoticeList } from "@/api/home"
28 import {setToken} from "@/utils/util";
28 export default { 29 export default {
29 components: { 30 components: {
30 NoticeBar 31 NoticeBar
...@@ -64,23 +65,11 @@ ...@@ -64,23 +65,11 @@
64 }) 65 })
65 }, 66 },
66 logout () { 67 logout () {
67 axios.post(this.BASE_API.ip + "/management/logout").then(() => { 68 axios.post(window._config.services.management + "/management/logout").then(() => {
68 if (process.env.NODE_ENV === 'development') { 69 setToken(undefined)
69 localStorage.removeItem('token') 70 sessionStorage.removeItem('token')
70 } else { 71 localStorage.setItem('dj-location',window.location.href)
71 Cookies.remove('ACCESS_TOKEN') 72 window.location.href = window._config.casBaseURL + '/logout?service=' + encodeURIComponent(window.location.href);
72 }
73 if (window._config.casEnable) {
74 window.location.href = window._config.casBaseURL + '/logout?service=' + encodeURIComponent(window.location.href);
75 } else {
76 this.$router.push({
77 path: '/login',
78 replace: true,
79 query: {
80 redirect: router.currentRoute.value.fullPath
81 }
82 })
83 }
84 }) 73 })
85 }, 74 },
86 75
......
1 /* 1 /*
2 * @Description: 项目权限 2 * @Description: 项目权限
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-06-13 16:28:25 4 * @LastEditTime: 2023-06-20 10:07:56
5 */ 5 */
6 import Vue from 'vue' 6 import Vue from 'vue'
7 import axios from 'axios' 7 import axios from 'axios'
...@@ -9,10 +9,10 @@ import router from './router' ...@@ -9,10 +9,10 @@ import router from './router'
9 import store from './store' 9 import store from './store'
10 import Cookies from 'js-cookie' 10 import Cookies from 'js-cookie'
11 import { getMenuInfo } from '@/api/user' 11 import { getMenuInfo } from '@/api/user'
12 import { getUrlParam } from '@/utils/operation'
13 import NProgress from 'nprogress' // progress bar 12 import NProgress from 'nprogress' // progress bar
14 import 'nprogress/nprogress.css' // progress bar style 13 import 'nprogress/nprogress.css' // progress bar style
15 import getPageTitle from '@/utils/get-page-title' 14 import getPageTitle from '@/utils/get-page-title'
15 import {getToken, getUrlParam, setToken} from "@/utils/util";
16 16
17 NProgress.configure({ showSpinner: false }) // NProgress Configuration 17 NProgress.configure({ showSpinner: false }) // NProgress Configuration
18 18
...@@ -23,36 +23,51 @@ router.beforeEach(async (to, from, next) => { ...@@ -23,36 +23,51 @@ router.beforeEach(async (to, from, next) => {
23 let hasAddDict = store.state.dict.addDict 23 let hasAddDict = store.state.dict.addDict
24 let hasAddRoute = store.state.permission.addRoutes 24 let hasAddRoute = store.state.permission.addRoutes
25 // cas操作 25 // cas操作
26 const token = localStorage.getItem("token") || Cookies.get('ACCESS_TOKEN'); 26 const token = getToken()
27 if (to.path === '/login') { 27 let locationUrl = window.location.origin + window.location.pathname;
28 if (token) { 28 function casValidate (ticket){
29 next('/') 29 axios.get(window._config.services.management + "/management/cas/validate", {
30 } else { 30 params: {
31 ticket: ticket,
32 service: locationUrl,
33 },
34 }).then(async (res) => {
35 if (res.data.status === 1) {
36 setToken(res.data.content.accessToken)
37 window.location.href = localStorage.getItem('dj-location') + '#' + localStorage.getItem('hash')
38 } else {
39 alert(res.data.message)
40 }
41 }).catch((e) => {
42 console.log(e);
43 });
44 }
45 async function permission () {
46 if (!hasAddDict) {
47 store.dispatch('dict/generateDic')
48 }
49 if (hasAddRoute) {
31 next() 50 next()
51 // next({ ...to, replace: true })
52 } else {
53 const { result: getMenuData } = await getMenuInfo()
54 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
55 // 获取用户信息
56 await store.dispatch('user/getUserInfo')
57 router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }])
58 const routeTo = Cookies.get('routerTo')
59 if (routeTo && routeTo !== '/') {
60 next({ ...to, replace: true })
61 } else {
62 next('/home')
63 }
32 } 64 }
33 return
34 } 65 }
35 if (window._config.casEnable === true) { 66 if (window._config.casEnable === true) {
36 let locationUrl = window.location.protocol + '//' + window.location.host + window.location.pathname;
37 if (!token) { 67 if (!token) {
38 let ticket = getUrlParam('ticket'); 68 let ticket = getUrlParam("ticket");
39 if (ticket) { 69 if (ticket) {
40 axios.get(Vue.prototype.BASE_API.ip + "/management/cas/validate", { 70 casValidate(ticket)
41 params: {
42 'ticket': ticket,
43 'service': locationUrl
44 }
45 }).then(async (res) => {
46 if (process.env.NODE_ENV === 'development') {
47 localStorage.setItem('token', res.data.content.accessToken)
48 } else {
49 Cookies.set('ACCESS_TOKEN', res.data.content.accessToken)
50 }
51 window.location.href = localStorage.getItem('location')
52
53 }).catch(e => {
54 console.log(e)
55 })
56 } else { 71 } else {
57 localStorage.setItem("location", window.location.href) 72 localStorage.setItem("location", window.location.href)
58 window.location.href = window._config.casBaseURL + '/login?service=' + encodeURIComponent(locationUrl); 73 window.location.href = window._config.casBaseURL + '/login?service=' + encodeURIComponent(locationUrl);
...@@ -60,44 +75,43 @@ router.beforeEach(async (to, from, next) => { ...@@ -60,44 +75,43 @@ router.beforeEach(async (to, from, next) => {
60 } else { 75 } else {
61 permission() 76 permission()
62 } 77 }
63
64 async function permission () {
65 if (!hasAddDict) {
66 store.dispatch('dict/generateDic')
67 }
68 if (hasAddRoute) {
69 next()
70 // next({ ...to, replace: true })
71 } else {
72 const { result: getMenuData } = await getMenuInfo()
73 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
74 // 获取用户信息
75 await store.dispatch('user/getUserInfo')
76 router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }])
77 const routeTo = Cookies.get('routerTo')
78 if (routeTo && routeTo !== '/') {
79 next({ ...to, replace: true })
80 } else {
81 next('/home')
82 }
83 }
84 }
85 } else { 78 } else {
79 // 使用自定义页面实现单点登录
86 if (!token) { 80 if (!token) {
87 const redirectData = { 81 let ticket = getUrlParam('ticket');
88 path: '/login', 82 if (ticket) {
89 replace: true, 83 casValidate(ticket)
84 } else {
85 if (to.path === '/login') {
86 if (getUrlParam('_flag') === '1') {
87 next();
88 return
89 } else {
90 //todo: loginUrl 需要业务系统根据登录页面路由地址获取,这里只是简写
91 localStorage.setItem('dj-location',locationUrl)
92 localStorage.setItem('hash',to.fullPath)
93 window.location.href = window._config.services.management + `/management/cas/status?loginUrl=${window._config.baseUrl}/dj/&hash=/login&`
94 return
95 }
96 }
97 localStorage.setItem('dj-location',locationUrl)
98 localStorage.setItem('hash',to.fullPath)
99 //todo: loginUrl 需要业务系统根据登录页面路由地址获取,这里只是简写
100 window.location.href = window._config.services.management + `/management/cas/status?loginUrl=${window._config.baseUrl}/dj/&hash=/login`
90 } 101 }
91 if (to.path) { 102 }else{
92 redirectData.query = { 103 if (to.path === '/login') {
93 ...redirectData.query, 104 const redirectUrl = getUrlParam('redirectUrl');
94 redirect: to.path, 105 if (redirectUrl && redirectUrl !== '') {
95 }; 106 window.location.href = redirectUrl
107 return
108 } else {
109 next('/');
110 return
111 }
96 } 112 }
97 next(redirectData) 113 permission()
98 return
99 } 114 }
100 next()
101 } 115 }
102 NProgress.done() 116 NProgress.done()
103 }) 117 })
......
...@@ -72,6 +72,14 @@ export const constantRoutes = [ ...@@ -72,6 +72,14 @@ export const constantRoutes = [
72 } 72 }
73 ] 73 ]
74 }, 74 },
75 // 登录页
76 {
77 path: '/login',
78 component: () => import('@/views/login/index'),
79 name: 'login',
80 hidden: true,
81 meta: { title: '登录' }
82 },
75 ] 83 ]
76 /** 84 /**
77 * asyncRoutes 85 * asyncRoutes
......
...@@ -114,27 +114,6 @@ export function down (index, data) { ...@@ -114,27 +114,6 @@ export function down (index, data) {
114 } 114 }
115 } 115 }
116 116
117 export function getUrlParam (paraName) {
118 let url = document.location.toString();
119 let arrObj = url.split('?');
120
121 if (arrObj.length > 1) {
122 let arrPara = arrObj[1].split('&');
123 let arr;
124
125 for (let i = 0; i < arrPara.length; i++) {
126 arr = arrPara[i].split('=');
127
128 if (arr != null && arr[0] === paraName) {
129 const index = arr[1].indexOf("#");
130 return arr[1].substring(0, index);
131 }
132 }
133 return '';
134 } else {
135 return '';
136 }
137 }
138 /** 117 /**
139 * @description: 身份证读卡器 118 * @description: 身份证读卡器
140 * @author: renchao 119 * @author: renchao
......
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
2 /* 2 /*
3 * @Description: 此文件主要创建 axios 实例,然后添加请求拦截器和响应拦截器 3 * @Description: 此文件主要创建 axios 实例,然后添加请求拦截器和响应拦截器
4 * @Autor: renchao 4 * @Autor: renchao
5 * @LastEditTime: 2023-06-13 17:16:13 5 * @LastEditTime: 2023-06-20 10:12:53
6 */ 6 */
7 import axios from 'axios' 7 import axios from 'axios'
8 import Router from '@/router' 8 import Router from '@/router'
9 import Cookies from 'js-cookie'
10 import { Message } from 'element-ui' 9 import { Message } from 'element-ui'
11 import { endLoadingSubCount } from './requestLoading' 10 import { endLoadingSubCount } from './requestLoading'
11 import {getToken, setToken} from "@/utils/util";
12 12
13 // create an axios instance 13 // create an axios instance
14 const service = axios.create({ 14 const service = axios.create({
...@@ -27,7 +27,7 @@ const service = axios.create({ ...@@ -27,7 +27,7 @@ const service = axios.create({
27 service.interceptors.request.use( 27 service.interceptors.request.use(
28 config => { 28 config => {
29 if (process.env.NODE_ENV === 'development') { 29 if (process.env.NODE_ENV === 'development') {
30 const token = localStorage.getItem('token') 30 const token = getToken()
31 // 添加请求头 31 // 添加请求头
32 if (token) { 32 if (token) {
33 config.headers['Authorization'] = 'Bearer ' + token 33 config.headers['Authorization'] = 'Bearer ' + token
...@@ -67,11 +67,8 @@ service.interceptors.response.use( ...@@ -67,11 +67,8 @@ service.interceptors.response.use(
67 window.__isNeedLogin = false 67 window.__isNeedLogin = false
68 Message.error('token失效,请重新登录'); 68 Message.error('token失效,请重新登录');
69 let locationUrl = window.location.protocol + '//' + window.location.host + window.location.pathname; 69 let locationUrl = window.location.protocol + '//' + window.location.host + window.location.pathname;
70 if (process.env.NODE_ENV === 'development') { 70 setToken(undefined)
71 localStorage.removeItem('token') 71 sessionStorage.removeItem('token')
72 } else {
73 Cookies.remove('ACCESS_TOKEN')
74 }
75 if (window._config.casEnable) { 72 if (window._config.casEnable) {
76 window.location.href = window._config.casBaseURL + '/logout?service=' + encodeURIComponent(locationUrl); 73 window.location.href = window._config.casBaseURL + '/logout?service=' + encodeURIComponent(locationUrl);
77 } else { 74 } else {
......
1 import Cookies from 'js-cookie'
2
3 const cookies = {}
4
5 /**
6 * @description 存储 cookie 值
7 * @param {String} name cookie name
8 * @param {String} value cookie value
9 * @param {Object} setting cookie setting
10 */
11 cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
12 let currentCookieSetting = {
13 expires: 1
14 }
15 Object.assign(currentCookieSetting, cookieSetting)
16 Cookies.set(`${name}`, value, currentCookieSetting)
17 }
18
19 /**
20 * @description 拿到 cookie 值
21 * @param {String} name cookie name
22 */
23 cookies.get = function (name = 'default') {
24 return Cookies.get(`${name}`)
25 }
26
27 /**
28 * @description 拿到 cookie 全部的值
29 */
30 cookies.getAll = function () {
31 return Cookies.get()
32 }
33
34 /**
35 * @description 删除 cookie
36 * @param {String} name cookie name
37 */
38 cookies.remove = function (name = 'default') {
39 return Cookies.remove(`${name}`)
40 }
41
42 export default cookies
1 import cookies from './util.cookies'
2 export function getUrlParam(paraName) {
3 let url = document.location.toString();
4 let arrObj = url.split('?');
5
6 if (arrObj.length > 1) {
7 let arrPara = arrObj[1].split('&');
8 let arr;
9
10 for (let i = 0; i < arrPara.length; i++) {
11 arr = arrPara[i].split('=');
12
13 if (arr != null && arr[0] === paraName) {
14 // 截取#之前的内容
15 let result = arr[1].endsWith('#/') ? arr[1].substr(0, arr[1].indexOf('#')) : arr[1];
16 return result;
17 }
18 }
19 return '';
20 } else {
21 return '';
22 }
23 }
24
25 export function setToken(token) {
26 if (token === undefined) {
27 if (process.env.NODE_ENV === 'development') {
28 sessionStorage.removeItem('token')
29 } else {
30 cookies.remove('ACCESS_TOKEN')
31 }
32 } else {
33 if (process.env.NODE_ENV === 'development') {
34 sessionStorage.setItem('token', token);
35 } else {
36 cookies.set('ACCESS_TOKEN', token)
37 }
38 }
39 }
40
41 export function getToken() {
42 if (process.env.NODE_ENV === 'development') {
43 return sessionStorage.getItem('token')
44 }
45 return cookies.get('ACCESS_TOKEN')
46 }
47
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
4 <title>隐藏</title>
5 <desc>Created with Sketch.</desc>
6 <g id="隐藏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <path d="M6.03072945,10.4919039 L5.73253111,12.7244564 C5.69597191,12.998168 5.44444773,13.190418 5.17073614,13.1538588 C4.89702455,13.1172996 4.70477455,12.8657754 4.74133375,12.5920638 L5.06197696,10.1914709 C4.16952851,9.84883526 3.3412638,9.33963486 2.57840414,8.66573829 L1.54490653,10.84056 C1.42638298,11.0899729 1.12811158,11.1960797 0.878698712,11.0775561 C0.629285844,10.9590326 0.52317909,10.6607612 0.641702643,10.4113483 L1.82431508,7.92273947 C1.1849111,7.22355926 0.59765863,6.39438608 0.0634190527,5.43653783 C-0.0710917064,5.19537095 0.0153701679,4.89082404 0.256537054,4.75631328 C0.49770394,4.62180252 0.802250844,4.7082644 0.936761603,4.94943128 C2.7218512,8.14995221 5.0622906,9.71807475 8.00009033,9.71807475 C10.9378901,9.71807475 13.2783295,8.14995221 15.0634191,4.94943128 C15.1979298,4.7082644 15.5024767,4.62180252 15.7436436,4.75631328 C15.9848105,4.89082404 16.0712724,5.19537095 15.9367616,5.43653783 C15.4384416,6.32998517 14.8939977,7.11147869 14.304129,7.77994884 L15.554597,10.4113483 C15.6731206,10.6607612 15.5670138,10.9590326 15.3176009,11.0775561 C15.0681881,11.1960797 14.7699167,11.0899729 14.6513931,10.84056 L13.5590961,8.54200484 C12.6449311,9.38205401 11.6347609,9.98078996 10.5307537,10.3348952 L10.8296734,12.5728484 C10.8662326,12.84656 10.6739826,13.0980842 10.400271,13.1346434 C10.1265594,13.1712026 9.87503523,12.9789526 9.83847602,12.705241 L9.5545725,10.5797109 C9.05379094,10.671864 8.53557174,10.7180748 8.00009033,10.7180748 C7.31528214,10.7180748 6.6587062,10.6424973 6.03072945,10.4919039 Z" id="形状结合" fill="#B4B4B4" fill-rule="nonzero"></path>
8 </g>
9 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
4 <title>显示</title>
5 <desc>Created with Sketch.</desc>
6 <g id="显示" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <path d="M8,13.5944821 C5.08783139,13.5944821 2.47901047,11.8330303 0.184843129,8.37324049 L3.55271368e-15,8.09448212 L0.184843129,7.81572374 C2.47901047,4.35593396 5.08783139,2.59448212 8,2.59448212 C10.9121686,2.59448212 13.5209895,4.35593396 15.8151569,7.81572374 L16,8.09448212 L15.8151569,8.37324049 C13.5209895,11.8330303 10.9121686,13.5944821 8,13.5944821 Z M8,3.59448212 C5.53379057,3.59448212 3.26813906,5.07524663 1.19270822,8.09448212 C3.26813906,11.1137176 5.53379057,12.5944821 8,12.5944821 C10.4662094,12.5944821 12.7318609,11.1137176 14.8072918,8.09448212 C12.7318609,5.07524663 10.4662094,3.59448212 8,3.59448212 Z M9.12299335,5.45693297 C8.68456104,5.73514629 8.39327462,6.2269821 8.39327462,6.78731592 C8.39327462,7.65519196 9.09205701,8.3587445 9.95404878,8.3587445 C10.2357938,8.3587445 10.5001026,8.28358173 10.7282737,8.15208542 C10.6331828,9.58403639 9.44941475,10.7158874 8.00308108,10.7158874 C6.49459548,10.7158874 5.27172629,9.48467042 5.27172629,7.96588735 C5.27172629,6.44710429 6.49459548,5.21588735 8.00308108,5.21588735 C8.40216026,5.21588735 8.78124917,5.30206019 9.12299335,5.45693297 Z" id="形状结合" fill="#0091FF" fill-rule="nonzero"></path>
8 </g>
9 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
4 <title>password</title>
5 <desc>Created with Sketch.</desc>
6 <g id="password" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <path d="M4.0011827,6.56400569 L4.0011827,4.87032377 C4.0011827,2.74881464 5.72100565,1.02899168 7.84251478,1.02899168 C9.96402392,1.02899168 11.6838469,2.74881464 11.6838469,4.87032377 L11.6838469,5.7928261 L10.7661998,5.7928261 L10.7661998,4.87032377 C10.7661998,3.25561712 9.45722144,1.94663874 7.84251478,1.94663874 C6.22780813,1.94663874 4.91882975,3.25561712 4.91882975,4.87032377 L4.91882975,6.56400569 L12.6850296,6.56400569 C13.4907156,6.56400569 14.1438531,7.21714323 14.1438531,8.02282922 L14.1438531,13.4028479 C14.1438531,14.2085339 13.4907156,14.8616714 12.6850296,14.8616714 L3,14.8616714 C2.19431401,14.8616714 1.54117647,14.2085339 1.54117647,13.4028479 L1.54117647,8.02282922 C1.54117647,7.21714323 2.19431401,6.56400569 3,6.56400569 L4.0011827,6.56400569 Z M3,7.48165275 C2.70111649,7.48165275 2.45882353,7.72394571 2.45882353,8.02282922 L2.45882353,13.4028479 C2.45882353,13.7017314 2.70111649,13.9440244 3,13.9440244 L12.6850296,13.9440244 C12.9839131,13.9440244 13.226206,13.7017314 13.226206,13.4028479 L13.226206,8.02282922 C13.226206,7.72394571 12.9839131,7.48165275 12.6850296,7.48165275 L3,7.48165275 Z" id="形状结合" fill="#6D7278" fill-rule="nonzero"></path>
8 </g>
9 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="UTF-8"?>
2 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
4 <title>user</title>
5 <desc>Created with Sketch.</desc>
6 <g id="user" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
7 <path d="M5.70040727,8.36338619 C4.96173204,8.70409103 4.31101884,9.24156453 3.78444015,9.95202823 C2.94870333,11.0788243 2.46666667,12.5978855 2.46666667,14.1120529 C2.46666667,14.2335891 2.59610246,14.3514362 2.77548069,14.3514362 L13.1661579,14.3514362 C13.3455361,14.3514362 13.4749719,14.2335891 13.4749719,14.1120529 C13.4749719,12.0278862 12.5626821,10.0351425 11.1096588,8.92092682 L11.6776024,8.18028444 C13.3693466,9.47755739 14.4083053,11.7469879 14.4083053,14.1120529 C14.4083053,14.7696063 13.8424825,15.2847695 13.1661579,15.2847695 L2.77548069,15.2847695 C2.09915609,15.2847695 1.53333333,14.7696063 1.53333333,14.1120529 C1.53333333,12.4013641 2.07738878,10.6868606 3.0347023,9.39614673 C3.53516209,8.7209228 4.13710805,8.17384176 4.81664416,7.7738283 C3.93912572,7.01707839 3.38576579,5.91929918 3.38576579,4.69637232 C3.38576579,2.40902821 5.3212908,0.556854908 7.69195361,0.556854908 C10.063179,0.556854908 11.9981414,2.40606943 11.9981414,4.69289423 C11.9981414,6.98023832 10.0626164,8.83241167 7.69195361,8.83241167 C6.97429417,8.83241167 6.29659602,8.66302531 5.70040727,8.36338619 Z M4.31909912,4.69637232 C4.31909912,6.45803072 5.82696798,7.89907833 7.69195361,7.89907833 C9.55611742,7.89907833 11.0648081,6.4553581 11.0648081,4.69289423 C11.0648081,2.93123585 9.55693923,1.49018824 7.69195361,1.49018824 C5.82778977,1.49018824 4.31909912,2.93390843 4.31909912,4.69637232 Z" id="形状结合" fill="#6D7278" fill-rule="nonzero"></path>
8 </g>
9 </svg>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div id="login">
3 <div class="login-logo"><img src="./images/logo-login.png" /></div>
4 <div class="login-con">
5 <!-- <div class="login-title">用户登录</div>-->
6 <div class="login-user" :class="{ 'select-border': change.user }">
7 <img class="user-icon" src="./images/user.svg" />
8 <!-- <div class="line-mid"></div>-->
9 <input
10 type="text"
11 class="user-input"
12 placeholder="请输入您的账号"
13 v-model="userInfo.username"
14 @focus="reduceBorder('user')"
15 @blur="addBorder('user')"
16 />
17 <span class="warning" v-show="warning.user">账号不能为空</span>
18 </div>
19 <div class="login-user user-mt" :class="{ 'select-border': change.pass }">
20 <img class="user-icon" src="./images/password.svg" />
21 <!-- <div class="line-mid"></div>-->
22 <input
23 type="password"
24 class="user-input"
25 placeholder="请输入您的密码"
26 v-model="userInfo.password"
27 v-show="!selectEye"
28 @focus="reduceBorder('pass')"
29 @blur="addBorder('pass')"
30 />
31 <input
32 type="text"
33 class="user-input"
34 placeholder="请输入您的密码"
35 v-model="userInfo.password"
36 v-show="selectEye"
37 @focus="reduceBorder('pass')"
38 @blur="addBorder('pass')"
39 />
40 <img
41 class="password-eye"
42 src="./images/open.svg"
43 @click="selectEyes"
44 v-show="selectEye"
45 />
46 <img
47 class="password-eye"
48 src="./images/close.svg"
49 @click="selectEyes"
50 v-show="!selectEye"
51 />
52 <span class="warning" v-show="warning.pass">密码不能为空</span>
53 </div>
54 <!-- <div class="login-remake">
55 <i
56 class="icon iconfont iconfuxuan1 icon-style"
57 v-show="!selectIcon"
58 @click="selectRemeber"
59 ></i>
60 <i
61 class="icon iconfont iconfuxuan-xuanzhong icon-select"
62 v-show="selectIcon"
63 @click="selectRemeber"
64 ></i>
65 <span class="remake_txt" @click="selectRemeber">记住账号密码</span>
66 </div> -->
67 <div id="loginBtn" class="login-btn" @click="goHome">登录</div>
68 </div>
69 <div class="reserved-con">
70 <!-- <div class="reserved-words">版权所有:2020©某某市自然资源和规划</div> -->
71 <div class="reserved-words line-two">
72 技术支持:爬山虎科技股份有限公司
73 </div>
74 </div>
75 </div>
76 </template>
77 <script>
78 import {getUrlParam} from "@/utils/util";
79 import axios from "axios";
80 export default {
81 data() {
82 return {
83 selectIcon: true,
84 selectEye: false,
85 userInfo:{
86 username: 'admin',
87 password: '123',
88 redirectUrl: ''
89 },
90 change: {
91 //边框
92 user: false,
93 pass: false,
94 },
95 warning: {
96 user: false,
97 pass: false,
98 },
99 canDo: 1,
100 };
101 },
102 mounted() {
103 this.initPage();
104 this.userInfo.redirectUrl = localStorage.getItem('dj-location')
105 },
106 methods: {
107 initPage() {
108 let userInfo =
109 localStorage.getItem("userInfo") &&
110 JSON.parse(localStorage.getItem("userInfo"));
111 if (userInfo) {
112 this.userInfo.username = userInfo.username;
113 this.userInfo.password = userInfo.password;
114 }
115 },
116 selectRemeber() {
117 this.selectIcon = !this.selectIcon;
118 },
119 goHome() {
120 axios.post(window._config.services.management + "/management/cas/login", this.userInfo).then(response => {
121 if (response.data.status === 1) {
122 if (response.data.content.location) {
123 window.location.href = response.data.content.location
124 }
125 } else {
126 this.$message.error(response.data.message)
127 }
128 }).catch(error => {
129 console.log(error)
130 this.$message.error(error.message)
131 })
132 },
133 selectEyes() {
134 this.selectEye = !this.selectEye;
135 },
136 reduceBorder(type) {
137 //获取焦点
138 if (type == "user") {
139 this.change.user = true;
140 } else {
141 this.change.pass = true;
142 }
143 },
144 addBorder(type) {
145 //失去焦点
146 if (type == "user") {
147 this.change.user = false;
148 if (!this.userInfo.username) {
149 this.warning.user = true;
150 } else {
151 this.warning.user = false;
152 }
153 } else {
154 this.change.pass = false;
155 if (!this.userInfo.password) {
156 this.warning.pass = true;
157 } else {
158 this.warning.pass = false;
159 }
160 }
161 },
162 },
163 };
164 </script>
165 <style lang="scss" scoped>
166 #login {
167 width: 100vw;
168 height: 100vh;
169 background: url("./images/login-bg.png") no-repeat bottom center;
170 background-size: 100% 100%;
171 overflow: hidden;
172 .login-logo {
173 margin-top: 8%;
174 height: 38px;
175 width: 100%;
176 text-align: center;
177 }
178 .login-logo img {
179 height: 100%;
180 }
181 .login-con {
182 margin: 88px auto;
183 width: 380px;
184 }
185 .login-user {
186 width: 100%;
187 height: 46px;
188 border: 1px solid rgba(155, 155, 155, 1);
189 box-sizing: border-box;
190 margin: 38px auto auto auto;
191 border-radius: 2px;
192 position: relative;
193 .user-icon {
194 float: left;
195 margin: 13px auto auto 10px;
196 width: 28px;
197 height: 18px;
198 }
199 .user-input {
200 width: 80%;
201 float: left;
202 font-size: 16px;
203 outline: 0;
204 border: none;
205 color: #4a4a4a;
206 line-height: 260%;
207 background-color: transparent;
208 }
209 .password-eye {
210 float: right;
211 width: 16px;
212 height: 16px;
213 margin-right: 12px;
214 margin-top: 13px;
215 cursor: pointer;
216 }
217 .warning {
218 font-size: 12px;
219 color: red;
220 position: absolute;
221 left: 0;
222 bottom: -18px;
223 }
224 }
225 .user-mt {
226 margin-top: 26px;
227 }
228 .select-border {
229 border: 1px solid rgba(0, 113, 255, 1);
230 }
231 .login-remake {
232 width: 320px;
233 height: 14px;
234 margin: 0 auto;
235 margin-top: 26px;
236 .icon-style {
237 font-size: 12px;
238 color: #5b5b5b;
239 float: left;
240 line-height: 14px;
241 cursor: pointer;
242 }
243 .icon-select {
244 font-size: 12px;
245 color: rgba(0, 127, 255, 1);
246 float: left;
247 line-height: 14px;
248 cursor: pointer;
249 }
250 .remake_txt {
251 font-size: 12px;
252 line-height: 14px;
253 color: #5b5b5b;
254 margin-left: 6px;
255 float: left;
256 cursor: pointer;
257 }
258 }
259 .login-btn {
260 width: 100%;
261 height: 40px;
262 background: rgba(0, 127, 255, 1);
263 border-radius: 4px;
264 margin: 0 auto;
265 margin-top: 40px;
266 font-size: 16px;
267 line-height: 40px;
268 text-align: center;
269 color: #fff;
270 cursor: pointer;
271 }
272 .reserved-con {
273 margin: 38px auto;
274 }
275 .reserved-words {
276 font-size: 12px;
277 color: #b4b4b4;
278 text-align: center;
279 }
280 .line-two {
281 margin-top: 8px;
282 }
283 }
284 </style>
285
...\ No newline at end of file ...\ No newline at end of file