Skip to content

S
so-manage-ui
Commit 8b09ef31 authored by 白舜's avatar 白舜 🎱
Browse files
Options

feat(登录注册): 样式修正，增加提示弹窗，修复跳转问题

parent eee46766
Hide whitespace changes
Inline Side-by-side
Showing with 203 additions and 152 deletions
src/assets/css/index.css
View file @ 8b09ef31
......@@ -341,8 +341,8 @@ div {
height: 36px;
}
.el-tree-node__content:hover {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 83%,
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 83%,
rgba(0, 0, 0, 0.05) 86%);
} */
/* .usrrole .el-tree-node:focus>.el-tree-node__content{
......@@ -570,7 +570,7 @@ border-radius:8px;
z-index: 20000 !important;
}
/*
/*
下拉选样式
此处勿删，apaasV3下拉选择样式统一用这个
*/
......@@ -1112,7 +1112,7 @@ border-radius:8px;
/* 详情页公共样式 by xuyiming ~~~end */
/*
/*
form_content
*/
.from_content1 {
......@@ -1561,11 +1561,16 @@ border-radius:8px;
}
.register_btn {
display: flex;
align-items: center;
background-color: #eff2fa;
border-radius: 4px;
border: solid 1px #b0bee8;
color: #3759be;
}
.register_btn .icon-arrow-right {
margin-left: 39px;
}
.forget_psd {
font-size: 14px;
color: #3759be;
......
src/components/login-by-account.vue
View file @ 8b09ef31
......@@ -31,12 +31,12 @@
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginAction()" style="width: 100%"> 登 录 </el-button>
<el-button type="primary" @click="loginAction()" style="width: 100%"> 登录 </el-button>
</el-form-item>
<el-form-item style="margin-top: 24px">
<el-form-item>
<el-button class="register_btn" @click.prevent="$emit('register')" style="width: 100%">
还没有账号？前往注册&emsp;
<bg-icon style="font-size: 12px; margin-right: 8px" icon="#bg-ic-arrow-right"></bg-icon>
还没有账号？前往注册
<bg-icon class="icon-arrow-right" icon="#bg-ic-arrow-right"></bg-icon>
</el-button>
</el-form-item>
<div class="regist_bottom">
......@@ -159,7 +159,7 @@ const getMenuObj = (menu, parentRowPath, menuObj) => {
});
};
const getImg = (clearInput = false) => {
axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`).then((res) => {
axios.get(`/apaas/system/v5/user/getCaptcha??width=138&height=36`).then((res) => {
if (res.data.code == 200) {
state.imgId = res.data.data.id;
state.imgSrc = res.data.data.captcha;
......@@ -193,6 +193,7 @@ const { loginForm, steploginFormRules, imgId, imgSrc, identifyCode, hidePassword
justify-content: space-between;
align-items: center;
.yzm_img {
margin: 4px 0 0 16px;
flex: 1;
}
......@@ -205,7 +206,13 @@ const { loginForm, steploginFormRules, imgId, imgSrc, identifyCode, hidePassword
background-color: #f7f8f9;
}
.regist_bottom {
line-height: 34px;
line-height: 1;
display: flex;
align-items: center;
justify-content: space-between;
:deep(.el-checkbox) {
height: auto;
}
}
}
</style>
src/components/login-by-code.vue
View file @ 8b09ef31
......@@ -33,13 +33,13 @@
</div>
</div>
</el-form-item>
<el-form-item style="margin-top: 54px">
<el-form-item>
<el-button type="primary" @click.prevent="loginAction()" style="width: 100%"> 登 录 </el-button>
</el-form-item>
<el-form-item style="margin-top: 24px">
<el-form-item>
<el-button class="register_btn" @click.prevent="$emit('register')" style="width: 100%">
还没有账号？前往注册&emsp;
<bg-icon style="font-size: 12px; margin-right: 8px" icon="#bg-ic-arrow-right"></bg-icon>
还没有账号？前往注册
<bg-icon icon="#bg-ic-arrow-right"></bg-icon>
</el-button>
</el-form-item>
<div>
......
src/main.js
View file @ 8b09ef31
......@@ -75,7 +75,7 @@ function getMenuObj(menu, parentRowPath, menuObj) {
}
});
}
store.commit("setWhiteList", ["/", "/login", "/register", "/password"]);
Promise.all([getUser(), getMenu("dadb2d3f-e263-48d1-9389-42acb9ea49f8")])
.then((res) => {
if (res[0].data.code == 200 && res[1].data.code == 200) {
......@@ -98,8 +98,9 @@ Promise.all([getUser(), getMenu("dadb2d3f-e263-48d1-9389-42acb9ea49f8")])
generateRoutes();
})
.catch((e) => {
console.error(e)
}).finally(() => {
console.error(e);
})
.finally(() => {
createVue.use(ElementPlus, { locale }).use(store).use(router).use(i18n).use(bgui);
createVue.mount("#app");
});
......
src/page/login/index.vue
View file @ 8b09ef31
......@@ -6,18 +6,14 @@
configOptions.backgroundUrl ? JSON.parse(configOptions.backgroundUrl)[0].url : getImageUrl('bg.png')
})`,
}">
<div class="bg-warning">系统有效期剩余345 天，请管理员及时更换license！</div>
<el-alert class="bg-warning" title="系统有效期剩余345 天，请管理员及时更换license！" type="warning" />
<div class="bg-main">
<!-- <div class="bg-logo">
<img class="logo" src="../../assets/imgs/login_img_logo.png" />
</div> -->
<div class="bg-content">
<bg-tabs
class="login-tab"
v-model="loginTab"
style="min-height: 450px; width: 480px"
v-if="pageType === 'login'">
<bg-tabs class="login-tab" v-model="loginTab" style="width: 480px" v-if="pageType === 'login'">
<bg-tab label="账号密码登录" name="account">
<LoginByAccount @register="switchPageType('account')" @password="password" />
</bg-tab>
......@@ -38,9 +34,18 @@
</p>
<p>
<span class="can_click_text" @click="open(configOptions.legalStatementUrl)">法律声明</span> |
<span class="can_click_text" @click="open(configOptions.privacyPolicyUrl)"> 隐私政策 </span>
<span class="can_click_text" @click="open(configOptions.privacyPolicyUrl)">隐私政策</span>
</p>
</div>
<el-dialog class="dialog_box" title="提示" v-model="dialogPasswordChange" width="400px">
<div>密码已过期，请修改密码后再次登录</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="primary" @click="password">立即修改</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
......@@ -59,6 +64,8 @@ const pageType = ref("login");
const loginTab = ref("account");
const configOptions = ref({});
const dialogPasswordChange = ref(false);
const switchPageType = (type) => {
// pageType.value = type
router.push("/register");
......@@ -96,15 +103,13 @@ onBeforeMount(() => {
background-image: url("@/assets/imgs/bg.png");
background-size: 100% 100%;
background-position: center center;
background-size: cover;
position: relative;
.bg-main {
position: absolute;
top: 50%;
right: 0;
margin-right: 16vw;
margin-bottom: 80px;
transform: translateY(calc(-50%));
top: calc(50vh - 250px);
right: calc(28vw - 240px);
width: 500px;
max-height: calc(100vh - 100px);
overflow: hidden auto;
......@@ -141,7 +146,18 @@ onBeforeMount(() => {
}
}
> .bg-content {
.bg-content {
:deep(.bg-tabs-content) {
padding: 32px 0;
}
}
:deep(.el-form) {
.el-form-item {
.el-input,
.el-button {
height: 40px;
}
}
}
}
> .bg-warning {
......@@ -151,6 +167,8 @@ onBeforeMount(() => {
font-size: 14px;
height: 32px;
line-height: 32px;
display: flex;
justify-content: center;
}
> .bg-msg {
......
src/page/register/index.vue
View file @ 8b09ef31
......@@ -32,7 +32,7 @@
<el-input v-model="infoForm.business_name" placeholder="请输入" maxlength="20" show-word-limit />
</el-form-item>
<el-form-item prop="develop_id" label="开发厂商名称">
<el-select v-model="infoForm.develop_id" placeholder="请选择" filterable style="width: 100%">
<el-select v-model="infoForm.develop_id" placeholder="请选择，如需新增，请输入任意字符" filterable style="width: 100%">
<el-option
v-for="item in developList"
:key="'develop_' + item.dict_id"
......
src/request/http.js
View file @ 8b09ef31
......@@ -2,111 +2,130 @@
* axios封装
* 请求拦截、响应拦截、错误统一处理
*/
import axios from 'axios';
import router from '../router/index';
import store from '../store/index';
import axios from "axios";
import router from "../router/index";
import store from "../store/index";
function getCookie(name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (arr[0] == name) return arr[1];
}
return "";
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (arr[0] == name) return arr[1];
}
return "";
}
const tip = msg => {
console.log(msg)
}
const tip = (msg) => {
console.log(msg);
};
/**
/**
* 跳转登录页
* 携带当前页面路由，以期在登录页面完成登录后返回当前页面
*/
const toLogin = () => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}
let path = router.currentRoute.value.path;
//白名单中的401不做跳转
if (!store.state.whiteList.includes(path)) {
window.location.href = `/apaas/manage/ui/#/login`;
}
// router.replace({
// path: '/login',
// query: {
// redirect: router.currentRoute.fullPath
// }
// });
};
/**
* 请求失败后的错误统一处理
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other) => {
// 状态码判断
switch (status) {
case 400: tip('请求错误(400)'); break;
// 401: 未登录状态，跳转登录页
case 401:
toLogin();
break;
// 403 token过期
// 清除token并跳转登录页
case 403:
tip('登录过期，请重新登录');
localStorage.removeItem('token');
store.commit('loginSuccess', null);
setTimeout(() => {
// toLogin();
}, 1000);
break;
case 404: tip('请求的资源不存在'); break;
case 408: tip('请求超时(408)');
case 500: tip('服务器错误(500)');
case 501: tip('服务未实现(501)');
case 502: tip('网络错误(502)');
case 503: tip('服务不可用(503)');
case 504: tip('网络超时(504)');
case 505: tip('HTTP版本不受支持(505)');
default: tip(`连接出错,${other}`);
}
}
// 状态码判断
switch (status) {
case 400:
tip("请求错误(400)");
break;
// 401: 未登录状态，跳转登录页
case 401:
toLogin();
break;
// 403 token过期
// 清除token并跳转登录页
case 403:
tip("登录过期，请重新登录");
localStorage.removeItem("token");
store.commit("loginSuccess", null);
setTimeout(() => {
// toLogin();
}, 1000);
break;
case 404:
tip("请求的资源不存在");
break;
case 408:
tip("请求超时(408)");
case 500:
tip("服务器错误(500)");
case 501:
tip("服务未实现(501)");
case 502:
tip("网络错误(502)");
case 503:
tip("服务不可用(503)");
case 504:
tip("网络超时(504)");
case 505:
tip("HTTP版本不受支持(505)");
default:
tip(`连接出错,${other}`);
}
};
// 创建axios实例
var instance = axios.create({ timeout: 1000 * 12 });
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
* 请求拦截器
* 每次请求前，如果存在token则在请求头中携带token
instance.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
/**
* 请求拦截器
* 每次请求前，如果存在token则在请求头中携带token
*/
instance.interceptors.request.use(
config => {
// const token = store.state.token;
// var token = 'Basic cm9vdA%3D%3D'
// token && (config.headers.Authorization = token);
// const token = store.state.token;
// var token = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZXh0IjoibGltaW5nZSIsInR5cGUiOiJ1c2VyIn0.YUPQ-3nttgfRGOUV4T06JZ6osH46nZ0UUolYdEBhvSQ'
// token && (config.headers.Authorization = token);
(config) => {
// const token = store.state.token;
// var token = 'Basic cm9vdA%3D%3D'
// token && (config.headers.Authorization = token);
// const token = store.state.token;
// var token = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZXh0IjoibGltaW5nZSIsInR5cGUiOiJ1c2VyIn0.YUPQ-3nttgfRGOUV4T06JZ6osH46nZ0UUolYdEBhvSQ'
// token && (config.headers.Authorization = token);
// if(config.headers.Authorization!="headers"){
// const token = process.env.DRONE_TOKEN ? process.env.DRONE_TOKEN : Conf.token;
// var Authorization = `Bearer ${token}`
// token && (config.headers.Authorization = Authorization);
// }else{
// config.headers.Authorization = '';
// }
return config;
},
error => Promise.error(error))
// if(config.headers.Authorization!="headers"){
// const token = process.env.DRONE_TOKEN ? process.env.DRONE_TOKEN : Conf.token;
// var Authorization = `Bearer ${token}`
// token && (config.headers.Authorization = Authorization);
// }else{
// config.headers.Authorization = '';
// }
return config;
},
(error) => Promise.error(error)
);
// 响应拦截器
instance.interceptors.response.use(
// 请求成功
res => res.status === 200|| res.status === 201? Promise.resolve(res) : Promise.reject(res),
// 请求失败
error => {
const { response } = error;
if (response) {
// 请求已发出，但是不在2xx的范围
errorHandle(response.status, response.data.errmessage);
return Promise.reject(response);
}
});
// 请求成功
(res) => (res.status === 200 || res.status === 201 ? Promise.resolve(res) : Promise.reject(res)),
// 请求失败
(error) => {
const { response } = error;
if (response) {
// 请求已发出，但是不在2xx的范围
errorHandle(response.status, response.data.errmessage);
return Promise.reject(response);
}
}
);
export default instance;
src/router/index.js
View file @ 8b09ef31
......@@ -48,7 +48,7 @@ const router = newRouterFunc();
function inWhiteList(toPath) {
//配置白名单
const whiteList = ["/login", "/register", "/password"];
const whiteList = store.state.whiteList;
const path = whiteList.find((value) => {
// 使用正则匹配
const reg = new RegExp("^" + value);
......@@ -59,7 +59,6 @@ function inWhiteList(toPath) {
router.beforeEach((to, from, next) => {
const userInfo = store.state.userInfo;
//已登录不可跳转登陆页
if (userInfo && (to.path == "/login" || to.path == "/")) {
next({
......
src/store/index.js
View file @ 8b09ef31
import {createStore} from 'vuex'
import { createStore } from "vuex";
const store = createStore({
state: {
userInfo:null,
menu:null,
route:null,
nameFlag:false,
msgBoxFlag:false,
nowzz:null,
menuObj:{},
treeFlag:false,
registerValid:false,
userInfo: null,
menu: null,
route: null,
nameFlag: false,
msgBoxFlag: false,
nowzz: null,
menuObj: {},
treeFlag: false,
registerValid: false,
msgUnreadNum: 0,
systemLogo: "",
whiteList: [],
},
getters: {
count(state) {
return state.userInfo
}
return state.userInfo;
},
},
mutations: {
setUserInfo(state, info) {
state.userInfo = info
state.userInfo = info;
},
setMenu(state,menu){
state.menu = menu
setMenu(state, menu) {
state.menu = menu;
},
setMenuObj(state,menuObj){
state.menuObj = menuObj
setMenuObj(state, menuObj) {
state.menuObj = menuObj;
},
setRoute(state,route){
state.route = route
setRoute(state, route) {
state.route = route;
},
setNameFlag(state,nameFlag){
state.nameFlag = nameFlag
setNameFlag(state, nameFlag) {
state.nameFlag = nameFlag;
},
setMsgBoxFlag(state,msgBoxFlag){
state.msgBoxFlag = msgBoxFlag
setMsgBoxFlag(state, msgBoxFlag) {
state.msgBoxFlag = msgBoxFlag;
},
setNowzz(state,nowzz){
state.nowzz = nowzz
setNowzz(state, nowzz) {
state.nowzz = nowzz;
},
setTreeFlag(state,treeFlag){
state.treeFlag = treeFlag
setTreeFlag(state, treeFlag) {
state.treeFlag = treeFlag;
},
setRegisterValid(state,registerValid){
state.registerValid = registerValid
setRegisterValid(state, registerValid) {
state.registerValid = registerValid;
},
setUnreadNum(state, num) {
state.msgUnreadNum = num
state.msgUnreadNum = num;
},
setSystemLogo(state, logo) {
state.systemLogo = logo;
},
setWhiteList(state, arr) {
state.whiteList = arr;
},
setSystemLogo(state,logo) {
state.systemLogo = logo
}
},
actions: {}
actions: {},
});
export default store;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment