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 282 additions and 62 deletions
1 import request from "@/utils/request";
2 import SERVER from "./config";
3
4 export function loginIn(username, password) {
5 return request({
6 url: `${SERVER.MANAGEMENTAPI}/login?username=${username}&password=${password}`,
7 method: "post",
8 });
9 }
10 export function loginOut() {
11 return request({
12 url: `${SERVER.MANAGEMENTAPI}/logout`,
13 method: "post",
14 });
15 }
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="navbar-con"> 2 <div class="navbar-con">
3 <div class="navbar"> 3 <div class="navbar">
4 <div class="title">{{ dicData['sysCode'] && dicData['sysCode'][0].DNAME }}</div> 4 <div class="title">
5 <div class="user">欢迎进入系统 {{ name }} <svg-icon icon-class='close' class="closeStyle" @click="onCancel" />退出系统</div> 5 {{ dicData["sysCode"] && dicData["sysCode"][0].DNAME }}
6 </div>
7 <div class="user">
8 欢迎进入系统 {{ name }}
9 <span @click="onCancel">
10 <svg-icon icon-class="close" class="closeStyle" />退出系统</span
11 >
12 </div>
6 <div class="sidebarLeft"> 13 <div class="sidebarLeft">
7 <sidebarLeft /> 14 <sidebarLeft />
8 </div> 15 </div>
...@@ -13,22 +20,31 @@ ...@@ -13,22 +20,31 @@
13 </div> 20 </div>
14 </template> 21 </template>
15 <script> 22 <script>
16 import sidebarLeft from './Sidebar/sidebarLeft' 23 import sidebarLeft from "./Sidebar/sidebarLeft";
17 import sidebarRight from './Sidebar/sidebarRight' 24 import sidebarRight from "./Sidebar/sidebarRight";
18 import { mapGetters } from 'vuex' 25 import { loginOut } from "@/api/login.js";
26 import { mapGetters } from "vuex";
19 export default { 27 export default {
20 components: { 28 components: {
21 sidebarLeft, 29 sidebarLeft,
22 sidebarRight 30 sidebarRight,
23 }, 31 },
24 computed: { 32 computed: {
25 ...mapGetters(['sidebar', 'dicData', 'name']) 33 ...mapGetters(["sidebar", "dicData", "name"]),
26 }, 34 },
27 methods: { 35 methods: {
28 onCancel () { 36 onCancel() {
29 } 37 loginOut()
30 } 38 .then((res) => {
31 } 39 sessionStorage.removeItem("token");
40 this.$router.push("/login");
41 })
42 .catch((error) => {
43 // console.dir(error);
44 });
45 },
46 },
47 };
32 </script> 48 </script>
33 <style lang="scss" scoped> 49 <style lang="scss" scoped>
34 /deep/.el-menu--horizontal { 50 /deep/.el-menu--horizontal {
...@@ -40,9 +56,9 @@ export default { ...@@ -40,9 +56,9 @@ export default {
40 height: 34px; 56 height: 34px;
41 width: 130px; 57 width: 130px;
42 text-align: center; 58 text-align: center;
43 color: #FFFFFF; 59 color: #ffffff;
44 margin-right: 20px; 60 margin-right: 20px;
45 background: url('~@/image/navbar.png') no-repeat; 61 background: url("~@/image/navbar.png") no-repeat;
46 background-size: 100% 100%; 62 background-size: 100% 100%;
47 } 63 }
48 64
...@@ -56,7 +72,7 @@ export default { ...@@ -56,7 +72,7 @@ export default {
56 72
57 /deep/.el-submenu__title { 73 /deep/.el-submenu__title {
58 height: 34px; 74 height: 34px;
59 color: #FFFFFF; 75 color: #ffffff;
60 } 76 }
61 77
62 /deep/.el-submenu__title span { 78 /deep/.el-submenu__title span {
...@@ -88,9 +104,9 @@ export default { ...@@ -88,9 +104,9 @@ export default {
88 104
89 // 导航选中背景色 105 // 导航选中背景色
90 .xuanzhong { 106 .xuanzhong {
91 background: url('~@/image/selNavbar.png') no-repeat; 107 background: url("~@/image/selNavbar.png") no-repeat;
92 background-size: 100% 100%; 108 background-size: 100% 100%;
93 color: #FFFFFF !important; 109 color: #ffffff !important;
94 font-weight: 700; 110 font-weight: 700;
95 } 111 }
96 112
...@@ -110,7 +126,6 @@ export default { ...@@ -110,7 +126,6 @@ export default {
110 @extend .xuanzhong; 126 @extend .xuanzhong;
111 } 127 }
112 128
113
114 .navbar { 129 .navbar {
115 height: $headerHeight; 130 height: $headerHeight;
116 overflow: hidden; 131 overflow: hidden;
...@@ -119,12 +134,12 @@ export default { ...@@ -119,12 +134,12 @@ export default {
119 align-items: center; 134 align-items: center;
120 padding: 0 20px; 135 padding: 0 20px;
121 justify-content: space-between; 136 justify-content: space-between;
122 background: url('~@/image/header.png') no-repeat; 137 background: url("~@/image/header.png") no-repeat;
123 background-size: 100% 100%; 138 background-size: 100% 100%;
124 139
125 .user { 140 .user {
126 font-size: 12px; 141 font-size: 12px;
127 color: #FFFFFF; 142 color: #ffffff;
128 position: absolute; 143 position: absolute;
129 right: 20px; 144 right: 20px;
130 top: 0; 145 top: 0;
...@@ -143,10 +158,9 @@ export default { ...@@ -143,10 +158,9 @@ export default {
143 right: 0; 158 right: 0;
144 margin: 0 auto; 159 margin: 0 auto;
145 font-size: 32px; 160 font-size: 32px;
146 color: #FFFFFF; 161 color: #ffffff;
147 font-weight: 700; 162 font-weight: 700;
148 text-align: center; 163 text-align: center;
149
150 } 164 }
151 165
152 .right-menu { 166 .right-menu {
......
1 <template> 1 <template>
2 <el-menu router :default-active="activeMenu" mode="horizontal"> 2 <el-menu router :default-active="activeMenu" mode="horizontal">
3 <!-- 权限菜单 --> 3 <!-- 权限菜单 -->
4 <sidebar-item v-for="route in permission_routes.slice(1, 4)" :key="route.path" :item="route" 4 <sidebar-item v-for="route in permission_routes.slice(2, 5)" :key="route.path" :item="route"
5 :base-path="route.path" /> 5 :base-path="route.path" />
6 <!-- 菜单全部展示 --> 6 <!-- 菜单全部展示 -->
7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> 7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......
1 <template> 1 <template>
2 <el-menu router :default-active="activeMenu" mode="horizontal"> 2 <el-menu router :default-active="activeMenu" mode="horizontal">
3 <!-- 权限菜单 --> 3 <!-- 权限菜单 -->
4 <sidebar-item v-for="route in permission_routes.slice(4, 7)" :key="route.path" :item="route" 4 <sidebar-item v-for="route in permission_routes.slice(5, 8)" :key="route.path" :item="route"
5 :base-path="route.path" /> 5 :base-path="route.path" />
6 <!-- 菜单全部展示 --> 6 <!-- 菜单全部展示 -->
7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> 7 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......
1 import router from './router' 1 import router from "./router";
2 import store from './store' 2 import store from "./store";
3 import { getMenuInfo } from '@/api/user' 3 import { getMenuInfo } from "@/api/user";
4 import NProgress from 'nprogress' // progress bar 4 import NProgress from "nprogress"; // progress bar
5 import 'nprogress/nprogress.css' // progress bar style 5 import "nprogress/nprogress.css"; // progress bar style
6 import getPageTitle from '@/utils/get-page-title' 6 import getPageTitle from "@/utils/get-page-title";
7 import Cookies from 'js-cookie' 7 import Cookies from "js-cookie";
8 NProgress.configure({ showSpinner: false }) // NProgress Configuration 8 NProgress.configure({ showSpinner: false }); // NProgress Configuration
9 9
10 router.beforeEach(async (to, from, next) => { 10 router.beforeEach(async (to, from, next) => {
11 NProgress.start() 11 NProgress.start();
12 document.title = getPageTitle(to.meta.title) 12 document.title = getPageTitle(to.meta.title);
13 let hasAddDict = store.state.dict.addDict 13 let hasAddDict = store.state.dict.addDict;
14 let hasAddRoute = store.state.permission.addRoutes 14 let hasAddRoute = store.state.permission.addRoutes;
15 if (!hasAddDict) { 15 if (to.path == "/login") {
16 store.dispatch('dict/generateDic') 16 sessionStorage.removeItem("token");
17 } 17 next();
18 if (hasAddRoute) { 18 } else {
19 next() 19 //判断token是否存在
20 } else { 20 const hasToken = sessionStorage.getItem("token");
21 const { result: getMenuData } = await getMenuInfo() 21 if (hasToken) {
22 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData) 22 //加载字典
23 if (!hasAddDict) {
24 store.dispatch("dict/generateDic");
25 }
26 if (hasAddRoute) {
27 next();
28 } else {
29 //请求菜单
30 const { result: getMenuData } = await getMenuInfo() || [];
31 const accessRoutes = await store.dispatch(
32 "permission/generateRoutes",
33 getMenuData
34 );
23 // 获取用户信息 35 // 获取用户信息
24 await store.dispatch('user/getUserInfo') 36 await store.dispatch("user/getUserInfo");
25 router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }]) 37 router.addRoutes([
26 const routeTo = Cookies.get('routerTo') 38 ...accessRoutes,
27 if (routeTo && routeTo !== '/') { 39 { path: "*", redirect: "/404", hidden: true },
28 next({ ...to, replace: true }) 40 ]);
41 const routeTo = Cookies.get("routerTo");
42 if (routeTo && routeTo !== "/") {
43 next({ ...to, replace: true });
29 } else { 44 } else {
30 next('/home') 45 next("/home");
31 } 46 }
47 }
48 } else {
49 next("/login");
32 } 50 }
33 NProgress.done() 51 }
34 }) 52 NProgress.done();
35 router.afterEach(to => { 53 });
36 // 解决刷新页面报404问题 54 router.afterEach((to) => {
37 Cookies.set("routerTo", to.fullPath) 55 // 解决刷新页面报404问题
38 NProgress.done() 56 Cookies.set("routerTo", to.fullPath);
39 }) 57 NProgress.done();
58 });
......
...@@ -20,6 +20,12 @@ export const constantRoutes = [ ...@@ -20,6 +20,12 @@ export const constantRoutes = [
20 } 20 }
21 ] 21 ]
22 }, 22 },
23 //登录
24 {
25 path: "/login",
26 name: "login",
27 component: () => import("@/views/login/index.vue"),
28 },
23 // 监管首页 29 // 监管首页
24 { 30 {
25 path: '/', 31 path: '/',
...@@ -240,7 +246,7 @@ export const asyncRoutes = [ ...@@ -240,7 +246,7 @@ export const asyncRoutes = [
240 meta: { title: '角色管理' } 246 meta: { title: '角色管理' }
241 } 247 }
242 ] 248 ]
243 } 249 },
244 ] 250 ]
245 251
246 const createRouter = () => 252 const createRouter = () =>
......
...@@ -10,8 +10,7 @@ const service = axios.create({ ...@@ -10,8 +10,7 @@ const service = axios.create({
10 baseURL: process.env.VUE_APP_BASE_API, 10 baseURL: process.env.VUE_APP_BASE_API,
11 withCredentials: true, //是否允许跨域 11 withCredentials: true, //是否允许跨域
12 headers: { 12 headers: {
13 'Content-Type': 'application/json; charset=utf-8', 13 'Content-Type': 'application/json; charset=utf-8'
14 'Authorization': 'bearer AT-4-MxSrO29Coe7VTazx8uuixtqqgO-hvCB6'
15 }, 14 },
16 timeout: 15000 15 timeout: 15000
17 }) 16 })
...@@ -19,8 +18,8 @@ const service = axios.create({ ...@@ -19,8 +18,8 @@ const service = axios.create({
19 // request interceptor 18 // request interceptor
20 service.interceptors.request.use( 19 service.interceptors.request.use(
21 config => { 20 config => {
22 config.headers.Authorization = 21 //调用登录接口时无token，也不需要传token，其他接口都传入token
23 'bearer AT-4-MxSrO29Coe7VTazx8uuixtqqgO-hvCB6' 22 config.headers.Authorization = sessionStorage.getItem("token") || "";
24 config.headers.Accept = 'application/json' 23 config.headers.Accept = 'application/json'
25 return config 24 return config
26 }, 25 },
...@@ -70,7 +69,8 @@ function handleErrorData (errMes) { ...@@ -70,7 +69,8 @@ function handleErrorData (errMes) {
70 } else { 69 } else {
71 switch (errMes.code) { 70 switch (errMes.code) {
72 case 401: 71 case 401:
73 Message.error("未授权，请重新登录!"); 72 Message.error("由于长时间未操作，请重新登录!");
73 window.location.href = `http://${window.location.host}`
74 break; 74 break;
75 case 403: 75 case 403:
76 Message.error("拒绝访问"); 76 Message.error("拒绝访问");
......
1 <template>
2 <div class="bg">
3 <div class="login-inner-bg login">
4 <div class="user_style">
5 <el-form
6 :model="user"
7 :rules="rules"
8 ref="user"
9 id="loginform"
10 class="demo-ruleForm"
11 >
12 <el-form-item prop="account">
13 <el-input v-model="user.account" placeholder="用户名"></el-input>
14 </el-form-item>
15 <el-form-item prop="password">
16 <el-input
17 type="password"
18 v-model="user.password"
19 placeholder="登录密码"
20 ></el-input>
21 </el-form-item>
22 <el-form-item>
23 <el-checkbox
24 label="记住用户名"
25 @change="checkUserName"
26 ></el-checkbox>
27 </el-form-item>
28 <el-form-item id="login">
29 <el-button type="primary" style="width: 100%" @click="login('user')"
30 >登录</el-button
31 >
32 </el-form-item>
33 </el-form>
34 </div>
35 </div>
36 </div>
37 </template>
38
39 <script>
40 import { loginIn } from "@/api/login.js";
41 export default {
42 name: "Login",
43 data: function () {
44 return {
45 user: {
46 account: "",
47 password: "",
48 checkStatus: false,
49 },
50 rules: {
51 account: [{ required: true, message: "请填写帐号", trigger: "blur" }],
52 password: [{ required: true, message: "请填写密码", trigger: "blur" }],
53 },
54 };
55 },
56 mounted: function () {
57 // this.checkUserName();
58 },
59 methods: {
60 //记住用户名
61 checkUserName: function (flag) {
62 this.user.checkStatus = flag;
63 if (this.user.checkStatus) {
64 localStorage.setItem("accountId", this.user.account);
65 let name = localStorage.getItem("accountId");
66 if (name === "") {
67 return;
68 } else {
69 this.user.account = name;
70 }
71 } else {
72 this.user.account = localStorage.getItem("accountId");
73 }
74 },
75 login(user) {
76 var self = this;
77 this.$refs[user].validate((valid) => {
78 if (valid) {
79 loginIn(self.user.account, self.user.password)
80 .then((res) => {
81 if (res.status === 1) {
82 sessionStorage.setItem("token", `Bearer ${res.content}`);
83 this.$router.push('/');
84 } else {
85 alert(res.message);
86 }
87 })
88 .catch((error) => {
89 // console.dir(error);
90 });
91 }
92 });
93 },
94 },
95 components: {},
96 };
97 </script>
98 <style scoped>
99 .bg {
100 width: 100%;
101 height: 100%;
102 background: url(../../image/bg.png) no-repeat;
103 background-size: 100% 100%;
104 overflow: hidden;
105 }
106
107 .login-inner-bg {
108 background: url(../../image/loginInnerBg.png) no-repeat;
109 width: 393px;
110 height: 348px;
111 margin: 35vh auto 0;
112 overflow: hidden;
113 }
114
115 .login .user_style {
116 margin: 90px 20px 0;
117 }
118
119 .login .btn {
120 width: 100%;
121 height: 6vh;
122 background-color: #00c2de;
123 border-radius: 5px;
124 font-size: 1.4vw;
125 color: #ffffff;
126 }
127
128 .login .btn:hover {
129 cursor: pointer;
130 background-color: #2d8cf0;
131 }
132
133 #loginform .el-button {
134 background: #409eff !important;
135 color: #ffffff !important;
136 }
137
138 #loginform .el-button:hover {
139 cursor: pointer !important;
140 background-color: #2d8cf0 !important;
141 }
142 </style>
143 <style>
144 .inputUser .ivu-input {
145 padding: 6px 24px !important;
146 border: 1px solid #9f9f9f !important;
147 }
148
149 #loginform .el-input__inner {
150 width: 100% !important;
151 caret-color: #000 !important;
152 color: #606266 !important;
153 border-radius: 4px !important;
154 border: 1px solid #67c23a !important;
155 background: #fff !important;
156 opacity: 1 !important;
157 }
158
159 #loginform .el-input__inner::-webkit-input-placeholder {
160 /* WebKit browsers */
161 color: #80807f !important;
162 }
163 .el-checkbox__label {
164 color: #fff;
165 }
166 </style>