Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
4f2c3637 by yangwei
Options

自定义登录

1 parent 9ec6679c
Inline Side-by-side
Showing 10 changed files with 532 additions and 111 deletions
1 <!-- 1 <!--
2 * @Description: 引入配置文件 2 * @Description: 引入配置文件
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-06-02 10:57:01 4 * @LastEditTime: 2023-06-20 11:24:04
5 --> 5 -->
6 <!DOCTYPE html> 6 <!DOCTYPE html>
7 <html> 7 <html>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 cloudEnable: false, 23 cloudEnable: false,
24 baseUrl: location.origin || location.protocol + '//' + location.host, 24 baseUrl: location.origin || location.protocol + '//' + location.host,
25 // 是否启用单点登录 25 // 是否启用单点登录
26 casEnable: true, 26 casEnable: false,
27 // cas 基地址 27 // cas 基地址
28 casBaseURL: 'http://192.168.2.38/cas', 28 casBaseURL: 'http://192.168.2.38/cas',
29 services: { 29 services: {
......
...@@ -17,55 +17,48 @@ ...@@ -17,55 +17,48 @@
17 </div> 17 </div>
18 </template> 18 </template>
19 <script> 19 <script>
20 import axios from 'axios' 20 import axios from "axios";
21 import Cookies from 'js-cookie' 21 import { mapGetters } from "vuex";
22 import { mapGetters } from 'vuex' 22 import Breadcrumb from "./Breadcrumb";
23 import Breadcrumb from './Breadcrumb' 23 import { setToken } from "@/utils/util";
24 export default { 24 export default {
25 components: { 25 components: {
26 Breadcrumb 26 Breadcrumb,
27 }, 27 },
28 computed: { 28 computed: {
29 ...mapGetters(["userInfo"]), 29 ...mapGetters(["userInfo"]),
30 userName () { 30 userName() {
31 return this.userInfo ? this.userInfo.name : "" 31 return this.userInfo ? this.userInfo.name : "";
32 } 32 },
33 }, 33 },
34 methods: { 34 methods: {
35 handleDataView () { 35 handleDataView() {
36 const { href } = this.$router.resolve('/dataView'); 36 const { href } = this.$router.resolve("/dataView");
37 window.open(href, '_blank'); 37 window.open(href, "_blank");
38 }, 38 },
39 themeChange (val) { 39 themeChange(val) {
40 this.$store.dispatch('app/updateTheme', val) 40 this.$store.dispatch("app/updateTheme", val);
41 }, 41 },
42 onCancel () { 42 onCancel() {
43 axios.post(this.BASE_API.ip + "/management/logout").then(() => { 43 axios
44 if (process.env.NODE_ENV === 'development') { 44 .post(window._config.services.management + "/management/logout")
45 localStorage.removeItem('token') 45 .then(() => {
46 } else { 46 setToken(undefined);
47 Cookies.remove('token') 47 sessionStorage.removeItem("token");
48 } 48 localStorage.setItem("dj-location", window.location.href);
49 if (window._config.casEnable) { 49 window.location.href =
50 window.location.href = window._config.casBaseURL + '/logout?service=' + encodeURIComponent(window.location.href); 50 window._config.casBaseURL +
51 } else { 51 "/logout?service=" +
52 this.$router.push({ 52 encodeURIComponent(window.location.href);
53 path: '/login', 53 });
54 replace: true, 54 },
55 query: { 55 },
56 redirect: router.currentRoute.value.fullPath 56 };
57 }
58 })
59 }
60 })
61 }
62 }
63 }
64 </script> 57 </script>
65 <style lang="scss" scoped> 58 <style lang="scss" scoped>
66 @import "~@/styles/_handle.scss"; 59 @import "~@/styles/_handle.scss";
67 60
68 .navbar-con { 61 .navbar-con {
69 position: relative; 62 position: relative;
70 63
71 .logo { 64 .logo {
...@@ -86,9 +79,9 @@ ...@@ -86,9 +79,9 @@
86 line-height: 50px; 79 line-height: 50px;
87 } 80 }
88 } 81 }
89 } 82 }
90 83
91 .navbar { 84 .navbar {
92 height: $headerHeight; 85 height: $headerHeight;
93 overflow: hidden; 86 overflow: hidden;
94 position: relative; 87 position: relative;
...@@ -111,5 +104,5 @@ ...@@ -111,5 +104,5 @@
111 align-items: center; 104 align-items: center;
112 } 105 }
113 } 106 }
114 } 107 }
115 </style> 108 </style>
......
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-06-09 09:43:07 4 * @LastEditTime: 2023-06-20 11:28:11
5 */ 5 */
6 import Vue from 'vue' 6 import Vue from 'vue'
7 import axios from 'axios' 7 import axios from 'axios'
8 import store from "./store"; 8 import store from "./store";
9 import router from "./router"; 9 import router from "./router";
10 import { getMenuInfo } from "@/api/user"; 10 import { getMenuInfo } from "@/api/user";
11 import { getUrlParam } from '@/utils/operation';
12 import NProgress from "nprogress"; // progress bar 11 import NProgress from "nprogress"; // progress bar
13 import "nprogress/nprogress.css"; // progress bar style 12 import "nprogress/nprogress.css"; // progress bar style
14 import getPageTitle from "@/utils/get-page-title"; 13 import getPageTitle from "@/utils/get-page-title";
15 import getTheme from "@/utils/theme"; 14 import getTheme from "@/utils/theme";
16 import Cookies from "js-cookie"; 15 import Cookies from "js-cookie";
16 import {getToken, getUrlParam, setToken} from "@/utils/util";
17
17 NProgress.configure({ showSpinner: false }); 18 NProgress.configure({ showSpinner: false });
19
18 router.beforeEach(async (to, from, next) => { 20 router.beforeEach(async (to, from, next) => {
19 getTheme() 21 getTheme()
20 NProgress.start(); 22 NProgress.start();
...@@ -23,42 +25,24 @@ router.beforeEach(async (to, from, next) => { ...@@ -23,42 +25,24 @@ router.beforeEach(async (to, from, next) => {
23 let hasUser = store.state.user.hasUser; 25 let hasUser = store.state.user.hasUser;
24 let hasAddRoute = store.state.permission.addRoutes; 26 let hasAddRoute = store.state.permission.addRoutes;
25 // cas操作 27 // cas操作
26 const token = localStorage.getItem("token") || Cookies.get('token'); 28 const token = getToken()
27 if (to.path === '/login') { 29 let locationUrl = window.location.origin + window.location.pathname;
28 if (token) { 30 function casValidate (ticket){
29 next('/') 31 axios.get(window._config.services.management + "/management/cas/validate", {
30 } else {
31 next()
32 }
33 return
34 }
35 if (window._config.casEnable === true) {
36 let locationUrl = window.location.protocol + '//' + window.location.host + window.location.pathname;
37 if (!token) {
38 let ticket = getUrlParam('ticket');
39 if (ticket) {
40 axios.get(Vue.prototype.BASE_API.ip + "/management/cas/validate", {
41 params: { 32 params: {
42 'ticket': ticket, 33 ticket: ticket,
43 'service': locationUrl 34 service: locationUrl,
44 } 35 },
45 }).then(async (res) => { 36 }).then(async (res) => {
46 if (process.env.NODE_ENV === 'development') { 37 if (res.data.status === 1) {
47 localStorage.setItem('token', res.data.content.accessToken) 38 setToken(res.data.content.accessToken)
39 window.location.href = localStorage.getItem('sjsb-location') + '#' + localStorage.getItem('hash')
48 } else { 40 } else {
49 Cookies.set('token', res.data.content.accessToken) 41 alert(res.data.message)
50 } 42 }
51 window.location.href = localStorage.getItem('location') 43 }).catch((e) => {
52 44 console.log(e);
53 }).catch(e => { 45 });
54 console.log(e)
55 })
56 } else {
57 localStorage.setItem("location", window.location.href)
58 window.location.href = window._config.casBaseURL + '/login?service=' + encodeURIComponent(locationUrl);
59 }
60 } else {
61 permission()
62 } 46 }
63 async function permission () { 47 async function permission () {
64 if (!hasUser) { 48 if (!hasUser) {
...@@ -89,22 +73,55 @@ router.beforeEach(async (to, from, next) => { ...@@ -89,22 +73,55 @@ router.beforeEach(async (to, from, next) => {
89 } 73 }
90 } 74 }
91 } 75 }
76 if (window._config.casEnable === true) {
77 if (!token) {
78 let ticket = getUrlParam("ticket");
79 if (ticket) {
80 casValidate(ticket)
81 } else {
82 localStorage.setItem("location", window.location.href)
83 window.location.href = window._config.casBaseURL + '/login?service=' + encodeURIComponent(locationUrl);
84 }
85 } else {
86 permission()
87 }
92 } else { 88 } else {
89 // 使用自定义页面实现单点登录
93 if (!token) { 90 if (!token) {
94 const redirectData = { 91 let ticket = getUrlParam('ticket');
95 path: '/login', 92 if (ticket) {
96 replace: true, 93 casValidate(ticket)
94 } else {
95 if (to.path === '/login') {
96 if (getUrlParam('_flag') === '1') {
97 next();
98 return
99 } else {
100 //todo: loginUrl 需要业务系统根据登录页面路由地址获取，这里只是简写
101 localStorage.setItem('sjsb-location',locationUrl)
102 localStorage.setItem('hash',to.fullPath)
103 window.location.href = window._config.services.management + `/management/cas/status?loginUrl=${window._config.baseUrl}/sjsb/&hash=/login&`
104 return
105 }
97 } 106 }
98 if (to.path) { 107 localStorage.setItem('sjsb-location',locationUrl)
99 redirectData.query = { 108 localStorage.setItem('hash',to.fullPath)
100 ...redirectData.query, 109 //todo: loginUrl 需要业务系统根据登录页面路由地址获取，这里只是简写
101 redirect: to.path, 110 window.location.href = window._config.services.management + `/management/cas/status?loginUrl=${window._config.baseUrl}/sjsb/&hash=/login`
102 };
103 } 111 }
104 next(redirectData) 112 }else{
113 if (to.path === '/login') {
114 const redirectUrl = getUrlParam('redirectUrl');
115 if (redirectUrl && redirectUrl !== '') {
116 window.location.href = redirectUrl
105 return 117 return
118 } else {
119 next('/');
120 return
121 }
122 }
123 permission()
106 } 124 }
107 next()
108 } 125 }
109 NProgress.done() 126 NProgress.done()
110 }); 127 });
......
1 /* 1 /*
2 * @Description :路由配置 2 * @Description :路由配置
3 * @Autor : miaofang 3 * @Autor : miaofang
4 * @LastEditTime: 2023-06-09 09:21:27 4 * @LastEditTime: 2023-06-20 11:09:57
5 */ 5 */
6 import Vue from 'vue' 6 import Vue from 'vue'
7 import Router from 'vue-router' 7 import Router from 'vue-router'
...@@ -22,7 +22,15 @@ export const constantRoutes = [ ...@@ -22,7 +22,15 @@ export const constantRoutes = [
22 meta: { title: '404' } 22 meta: { title: '404' }
23 } 23 }
24 ] 24 ]
25 } 25 },
26 // 登录页
27 {
28 path: '/login',
29 component: () => import('@/views/login/index'),
30 name: 'login',
31 hidden: true,
32 meta: { title: '登录' }
33 },
26 ] 34 ]
27 /** 35 /**
28 * asyncRoutes 36 * asyncRoutes
......
...@@ -142,25 +142,4 @@ export function getFirstDayOfSeason (d) { ...@@ -142,25 +142,4 @@ export function getFirstDayOfSeason (d) {
142 return timeFormat(date); 142 return timeFormat(date);
143 } 143 }
144 144
145 export function getUrlParam (paraName) {
146 let url = document.location.toString();
147 let arrObj = url.split('?');
148
149 if (arrObj.length > 1) {
150 let arrPara = arrObj[1].split('&');
151 let arr;
152
153 for (let i = 0; i < arrPara.length; i++) {
154 arr = arrPara[i].split('=');
155
156 if (arr != null && arr[0] === paraName) {
157 const index = arr[1].indexOf("#");
158 return arr[1].substring(0, index);
159 }
160 }
161 return '';
162 } else {
163 return '';
164 }
165 }
166 145
......
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 <template>
2 <div class="bg">
3 <div class="title">
4 <img src="../../image/bdclogo.png" alt="" />
5 <h2>{{ BASE_API.TITLE }}</h2>
6 </div>
7 <div class="login-inner-bg login">
8 <div class="user_style">
9 <h3>用户登录</h3>
10 <el-form
11 :model="userInfo"
12 :rules="rules"
13 ref="user"
14 id="loginform"
15 class="demo-ruleForm"
16 >
17 <el-form-item prop="username">
18 <el-input
19 class="username"
20 v-model="userInfo.username"
21 placeholder="请输入用户名"
22 ></el-input>
23 </el-form-item>
24 <el-form-item prop="password">
25 <el-input
26 type="password"
27 class="password"
28 @keyup.enter.native="login('user')"
29 v-model="userInfo.password"
30 placeholder="请输入密码"
31 show-password
32 ></el-input>
33 </el-form-item>
34 <!-- <el-form-item prop="yz">
35 <div class="flex-container">
36 <div class="flex-input">
37 <el-input class="yz" @keyup.native="login('user')" v-model="userInfo.yz" placeholder="请输入验证码"></el-input>
38 </div>
39 <div class="flex-line"></div>
40 <div class="flex-img"><canvas id="s-canvas" ref="s-canvas"></canvas></div>
41 <div class="flex-renovate">
42 <font id="renovate" @click="verification">换一批</font>
43 </div>
44 </div>
45 </el-form-item> -->
46 <el-form-item class="login-btn">
47 <el-button type="primary" style="width: 100%" @click="login('user')"
48 >登录</el-button
49 >
50 </el-form-item>
51 </el-form>
52 </div>
53 </div>
54 </div>
55 </template>
56
57 <script>
58 import axios from "axios";
59 export default {
60 name: "sbLogin",
61 data() {
62 return {
63 userInfo: {
64 username: "admin",
65 password: "123",
66 redirectUrl: "",
67 yz: "",
68 checkStatus: false,
69 },
70 productName: "",
71 rules: {
72 username: [{ required: true, message: "请填写帐号", trigger: "blur" }],
73 password: [{ required: true, message: "请填写密码", trigger: "blur" }],
74 },
75 };
76 },
77 mounted() {
78 this.userInfo.redirectUrl = localStorage.getItem("sjsb-location");
79 },
80 methods: {
81 verification() {
82 let str = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ",
83 code = "",
84 i = 0;
85 for (; i++ < 4; )
86 code += str[Math.floor(Math.random() * (str.length - 0) + 0)];
87 setTimeout(() => {
88 let canvas = document.getElementById("s-canvas"),
89 ctx = canvas.getContext("2d");
90 canvas.width = 80;
91 canvas.height = 28;
92 ctx.fillStyle = "#ffffff";
93 ctx.fillRect(0, 0, 80, 28);
94 for (i = 0; i < code.length; i++) {
95 this.drawText(ctx, code[i], i);
96 }
97 }, 0);
98 },
99 drawText(ctx, txt, i) {
100 ctx.fillStyle = this.randomColor(50, 160);
101 ctx.font = "18px SimHei";
102 let x = (i + 1) * (80 / (4 + 1)),
103 y = this.randomNum(18, 28 - 5);
104 ctx.translate(x, y);
105 ctx.fillText(txt, 0, 0);
106 ctx.rotate((-0 * Math.PI) / 180);
107 ctx.translate(-x, -y);
108 },
109 randomColor(min, max) {
110 let r = this.randomNum(min, max);
111 let g = this.randomNum(min, max);
112 let b = this.randomNum(min, max);
113 return "rgb(" + r + "," + g + "," + b + ")";
114 },
115 randomNum(min, max) {
116 return Math.floor(Math.random() * (max - min) + min);
117 },
118 //记住用户名
119 checkUserName: function (flag) {
120 this.userInfo.checkStatus = flag;
121 if (this.userInfo.checkStatus) {
122 localStorage.setItem("usernameId", this.userInfo.username);
123 let name = localStorage.getItem("usernameId");
124 if (name === "") {
125 return;
126 } else {
127 this.userInfo.username = name;
128 }
129 } else {
130 this.userInfo.username = localStorage.getItem("usernameId");
131 }
132 },
133 login() {
134 axios.post(window._config.services.management + "/management/cas/login", this.userInfo).then(response => {
135 if (response.data.status === 1) {
136 if (response.data.content.location) {
137 window.location.href = response.data.content.location
138 }
139 } else {
140 this.$message.error(response.data.message)
141 }
142 }).catch(error => {
143 console.log(error)
144 this.$message.error(error.message)
145 })
146 },
147 },
148 };
149 </script>
150 <style scoped lang="scss">
151 .username,
152 .password,
153 .yz {
154 position: relative;
155
156 &:before {
157 content: "";
158 display: block;
159 width: 16px;
160 height: 16px;
161 position: absolute;
162 left: 10px;
163 top: 7px;
164 background-size: 100% 100%;
165 }
166
167 /deep/ .el-input__inner {
168 color: #000 !important;
169 text-indent: 24px;
170 }
171 }
172
173 .flex-container {
174 position: relative;
175 display: -webkit-flex;
176 display: flex;
177 }
178
179 .flex-input {
180 width: 100%;
181 }
182
183 .flex-line {
184 position: absolute;
185 width: 1px;
186 height: 64%;
187 margin: 5px;
188 right: 36%;
189 background-color: #cccccc;
190 }
191
192 .flex-img {
193 position: absolute;
194 margin: 2px;
195 right: 16%;
196 }
197
198 .flex-renovate {
199 position: absolute;
200 margin: 1px;
201 right: 3%;
202 }
203
204 #renovate {
205 color: #3f8fea;
206 font-size: 16px;
207 font-weight: 700;
208 cursor: pointer;
209 }
210
211 .username::before {
212 background-image: url(../../image/userlogo.png);
213 }
214
215 .password::before {
216 background-image: url(../../image/passlogo.png);
217 }
218
219 .yz::before {
220 background-image: url(../../image/yzlogo.png);
221 }
222
223 .bg {
224 width: 100%;
225 height: 100%;
226 min-width: 1440px;
227 min-height: 560px;
228 background: url(../../image/loginBoxsb.png) no-repeat;
229 background-size: 100% 100%;
230 overflow: hidden;
231 position: relative;
232 }
233
234 .title {
235 width: 24%;
236 height: 6%;
237 top: 20%;
238 right: 38%;
239 position: absolute;
240
241 img {
242 width: 60px;
243 height: 60px;
244 top: 0%;
245 left: 2%;
246 position: absolute;
247 }
248
249 h2 {
250 top: 25%;
251 left: 22%;
252 position: absolute;
253 width: 383px;
254 height: 42px;
255 font-size: 28px;
256 font-weight: 600;
257 color: #ffffff;
258 text-shadow: 0px 4px 4px #002c95;
259 }
260 }
261
262 .login-inner-bg {
263 background: white;
264 width: 24.6%;
265 min-width: 360px;
266 top: 30%;
267 right: 38%;
268 position: absolute;
269 background-size: 100% 100%;
270 box-sizing: border-box;
271 padding: 56px;
272 }
273
274 .login {
275 .user_style {
276 h3 {
277 font-weight: normal;
278 text-align: center;
279 margin: -10px auto 28px;
280 font-weight: 400;
281 width: 125px;
282 height: 29px;
283 font-size: 20px;
284 font-family: Source Han Sans CN;
285 font-weight: 400;
286 color: #333333;
287 }
288 }
289
290 .btn {
291 width: 100%;
292 height: 6vh;
293 background-color: #00c2de;
294 border-radius: 5px;
295 font-size: 1.4vw;
296 color: #000;
297 }
298
299 .btn:hover {
300 cursor: pointer;
301 background-color: #2d8cf0;
302 }
303 }
304
305 .login #loginform {
306 .el-form-item {
307 margin-bottom: 24px !important;
308 }
309
310 .login-btn {
311 margin-top: 30px !important;
312 }
313
314 .el-button {
315 font-size: 18px;
316 border-radius: 0;
317 background: #4162d8 !important;
318 color: #ffffff !important;
319 cursor: pointer !important;
320 }
321
322 .el-input__inner {
323 width: 100% !important;
324 }
325
326 .el-checkbox__label {
327 color: #fff;
328 }
329 }
330
331 .inputUser .ivu-input {
332 padding: 6px 24px !important;
333 border: 1px solid #9f9f9f !important;
334 }
335 </style>
...@@ -15,7 +15,7 @@ module.exports = { ...@@ -15,7 +15,7 @@ module.exports = {
15 * Detail: https://cli.vuejs.org/config/#publicpath 15 * Detail: https://cli.vuejs.org/config/#publicpath
16 */ 16 */
17 // 加载资源的路径 17 // 加载资源的路径
18 publicPath: './', 18 publicPath: '/sjsb/',
19 // 设置项目打包生成的文件的存储目录，可以是静态路径也可以是相对路径 19 // 设置项目打包生成的文件的存储目录，可以是静态路径也可以是相对路径
20 outputDir: 'dist', 20 outputDir: 'dist',
21 // 设置放置打包生成的静态资源 (js、css、img、fonts) 的目录 21 // 设置放置打包生成的静态资源 (js、css、img、fonts) 的目录
......