Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
0389220f by yangwei
Options

登录流程修改

1 parent ca741a7e
Inline Side-by-side
Showing 9 changed files with 277 additions and 57 deletions
import request from "@/utils/request";
import SERVER from "./config";
export function loginIn(username, password) {
return request({
url: `${SERVER.MANAGEMENTAPI}/login?username=${username}&password=${password}`,
method: "post",
});
}
export function loginOut() {
return request({
url: `${SERVER.MANAGEMENTAPI}/logout`,
method: "post",
});
}
\ No newline at end of file
<template>
<div class="navbar-con">
<div class="navbar">
<div class="title">{{ dicData['sysCode'] && dicData['sysCode'][0].DNAME }}</div>
<div class="user">欢迎进入系统 {{ name }} <svg-icon icon-class='close' class="closeStyle" @click="onCancel" />退出系统</div>
<div class="title">
{{ dicData["sysCode"] && dicData["sysCode"][0].DNAME }}
</div>
<div class="user">
欢迎进入系统 {{ name }}
<span @click="onCancel">
<svg-icon icon-class="close" class="closeStyle" />退出系统</span
>
</div>
<div class="sidebarLeft">
<sidebarLeft />
</div>
......@@ -13,22 +20,31 @@
</div>
</template>
<script>
import sidebarLeft from './Sidebar/sidebarLeft'
import sidebarRight from './Sidebar/sidebarRight'
import { mapGetters } from 'vuex'
import sidebarLeft from "./Sidebar/sidebarLeft";
import sidebarRight from "./Sidebar/sidebarRight";
import { loginOut } from "@/api/login.js";
import { mapGetters } from "vuex";
export default {
components: {
sidebarLeft,
sidebarRight
sidebarRight,
},
computed: {
...mapGetters(['sidebar', 'dicData', 'name'])
...mapGetters(["sidebar", "dicData", "name"]),
},
methods: {
onCancel () {
}
}
}
onCancel() {
loginOut()
.then((res) => {
sessionStorage.removeItem("token");
this.$router.push("/login");
})
.catch((error) => {
// console.dir(error);
});
},
},
};
</script>
<style lang="scss" scoped>
/deep/.el-menu--horizontal {
......@@ -40,9 +56,9 @@ export default {
height: 34px;
width: 130px;
text-align: center;
color: #FFFFFF;
color: #ffffff;
margin-right: 20px;
background: url('~@/image/navbar.png') no-repeat;
background: url("~@/image/navbar.png") no-repeat;
background-size: 100% 100%;
}
......@@ -56,7 +72,7 @@ export default {
/deep/.el-submenu__title {
height: 34px;
color: #FFFFFF;
color: #ffffff;
}
/deep/.el-submenu__title span {
......@@ -88,9 +104,9 @@ export default {
// 导航选中背景色
.xuanzhong {
background: url('~@/image/selNavbar.png') no-repeat;
background: url("~@/image/selNavbar.png") no-repeat;
background-size: 100% 100%;
color: #FFFFFF !important;
color: #ffffff !important;
font-weight: 700;
}
......@@ -110,7 +126,6 @@ export default {
@extend .xuanzhong;
}
.navbar {
height: $headerHeight;
overflow: hidden;
......@@ -119,12 +134,12 @@ export default {
align-items: center;
padding: 0 20px;
justify-content: space-between;
background: url('~@/image/header.png') no-repeat;
background: url("~@/image/header.png") no-repeat;
background-size: 100% 100%;
.user {
font-size: 12px;
color: #FFFFFF;
color: #ffffff;
position: absolute;
right: 20px;
top: 0;
......@@ -143,10 +158,9 @@ export default {
right: 0;
margin: 0 auto;
font-size: 32px;
color: #FFFFFF;
color: #ffffff;
font-weight: 700;
text-align: center;
}
.right-menu {
......
<template>
<el-menu router :default-active="activeMenu" mode="horizontal">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes.slice(1, 4)" :key="route.path" :item="route"
<sidebar-item v-for="route in permission_routes.slice(2, 5)" :key="route.path" :item="route"
:base-path="route.path" />
<!-- 菜单全部展示 -->
<!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......
<template>
<el-menu router :default-active="activeMenu" mode="horizontal">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes.slice(4, 7)" :key="route.path" :item="route"
<sidebar-item v-for="route in permission_routes.slice(5, 8)" :key="route.path" :item="route"
:base-path="route.path" />
<!-- 菜单全部展示 -->
<!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......
import router from './router'
import store from './store'
import { getMenuInfo } from '@/api/user'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from '@/utils/get-page-title'
import Cookies from 'js-cookie'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
import router from "./router";
import store from "./store";
import { getMenuInfo } from "@/api/user";
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
import getPageTitle from "@/utils/get-page-title";
import Cookies from "js-cookie";
NProgress.configure({ showSpinner: false }); // NProgress Configuration
router.beforeEach(async (to, from, next) => {
NProgress.start()
document.title = getPageTitle(to.meta.title)
let hasAddDict = store.state.dict.addDict
let hasAddRoute = store.state.permission.addRoutes
NProgress.start();
document.title = getPageTitle(to.meta.title);
let hasAddDict = store.state.dict.addDict;
let hasAddRoute = store.state.permission.addRoutes;
if (to.path == "/login") {
sessionStorage.removeItem("token");
next();
} else {
//判断token是否存在
const hasToken = sessionStorage.getItem("token");
if (hasToken) {
//加载字典
if (!hasAddDict) {
store.dispatch('dict/generateDic')
store.dispatch("dict/generateDic");
}
if (hasAddRoute) {
next()
next();
} else {
const { result: getMenuData } = await getMenuInfo()
const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
//请求菜单
const { result: getMenuData } = await getMenuInfo() || [];
const accessRoutes = await store.dispatch(
"permission/generateRoutes",
getMenuData
);
// 获取用户信息
await store.dispatch('user/getUserInfo')
router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }])
const routeTo = Cookies.get('routerTo')
if (routeTo && routeTo !== '/') {
next({ ...to, replace: true })
await store.dispatch("user/getUserInfo");
router.addRoutes([
...accessRoutes,
{ path: "*", redirect: "/404", hidden: true },
]);
const routeTo = Cookies.get("routerTo");
if (routeTo && routeTo !== "/") {
next({ ...to, replace: true });
} else {
next("/home");
}
}
} else {
next('/home')
next("/login");
}
}
NProgress.done()
})
router.afterEach(to => {
NProgress.done();
});
router.afterEach((to) => {
// 解决刷新页面报404问题
Cookies.set("routerTo", to.fullPath)
NProgress.done()
})
Cookies.set("routerTo", to.fullPath);
NProgress.done();
});
......
......@@ -20,6 +20,12 @@ export const constantRoutes = [
}
]
},
//登录
{
path: "/login",
name: "login",
component: () => import("@/views/login/index.vue"),
},
// 监管首页
{
path: '/',
......@@ -240,7 +246,7 @@ export const asyncRoutes = [
meta: { title: '角色管理' }
}
]
}
},
]
const createRouter = () =>
......
......@@ -10,8 +10,7 @@ const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
withCredentials: true, //是否允许跨域
headers: {
'Content-Type': 'application/json; charset=utf-8',
'Authorization': 'bearer AT-4-MxSrO29Coe7VTazx8uuixtqqgO-hvCB6'
'Content-Type': 'application/json; charset=utf-8'
},
timeout: 15000
})
......@@ -19,8 +18,8 @@ const service = axios.create({
// request interceptor
service.interceptors.request.use(
config => {
config.headers.Authorization =
'bearer AT-4-MxSrO29Coe7VTazx8uuixtqqgO-hvCB6'
//调用登录接口时无token，也不需要传token，其他接口都传入token
config.headers.Authorization = sessionStorage.getItem("token") || "";
config.headers.Accept = 'application/json'
return config
},
......@@ -70,7 +69,8 @@ function handleErrorData (errMes) {
} else {
switch (errMes.code) {
case 401:
Message.error("未授权，请重新登录!");
Message.error("由于长时间未操作，请重新登录!");
window.location.href = `http://${window.location.host}`
break;
case 403:
Message.error("拒绝访问");
......
<template>
<div class="bg">
<div class="login-inner-bg login">
<div class="user_style">
<el-form
:model="user"
:rules="rules"
ref="user"
id="loginform"
class="demo-ruleForm"
>
<el-form-item prop="account">
<el-input v-model="user.account" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
v-model="user.password"
placeholder="登录密码"
></el-input>
</el-form-item>
<el-form-item>
<el-checkbox
label="记住用户名"
@change="checkUserName"
></el-checkbox>
</el-form-item>
<el-form-item id="login">
<el-button type="primary" style="width: 100%" @click="login('user')"
>登录</el-button
>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { loginIn } from "@/api/login.js";
export default {
name: "Login",
data: function () {
return {
user: {
account: "",
password: "",
checkStatus: false,
},
rules: {
account: [{ required: true, message: "请填写帐号", trigger: "blur" }],
password: [{ required: true, message: "请填写密码", trigger: "blur" }],
},
};
},
mounted: function () {
// this.checkUserName();
},
methods: {
//记住用户名
checkUserName: function (flag) {
this.user.checkStatus = flag;
if (this.user.checkStatus) {
localStorage.setItem("accountId", this.user.account);
let name = localStorage.getItem("accountId");
if (name === "") {
return;
} else {
this.user.account = name;
}
} else {
this.user.account = localStorage.getItem("accountId");
}
},
login(user) {
var self = this;
this.$refs[user].validate((valid) => {
if (valid) {
loginIn(self.user.account, self.user.password)
.then((res) => {
if (res.status === 1) {
sessionStorage.setItem("token", `Bearer ${res.content}`);
this.$router.push('/');
} else {
alert(res.message);
}
})
.catch((error) => {
// console.dir(error);
});
}
});
},
},
components: {},
};
</script>
<style scoped>
.bg {
width: 100%;
height: 100%;
background: url(../../image/bg.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.login-inner-bg {
background: url(../../image/loginInnerBg.png) no-repeat;
width: 393px;
height: 348px;
margin: 35vh auto 0;
overflow: hidden;
}
.login .user_style {
margin: 90px 20px 0;
}
.login .btn {
width: 100%;
height: 6vh;
background-color: #00c2de;
border-radius: 5px;
font-size: 1.4vw;
color: #ffffff;
}
.login .btn:hover {
cursor: pointer;
background-color: #2d8cf0;
}
#loginform .el-button {
background: #409eff !important;
color: #ffffff !important;
}
#loginform .el-button:hover {
cursor: pointer !important;
background-color: #2d8cf0 !important;
}
</style>
<style>
.inputUser .ivu-input {
padding: 6px 24px !important;
border: 1px solid #9f9f9f !important;
}
#loginform .el-input__inner {
width: 100% !important;
caret-color: #000 !important;
color: #606266 !important;
border-radius: 4px !important;
border: 1px solid #67c23a !important;
background: #fff !important;
opacity: 1 !important;
}
#loginform .el-input__inner::-webkit-input-placeholder {
/* WebKit browsers */
color: #80807f !important;
}
.el-checkbox__label {
color: #fff;
}
</style>