46dbc9d4 by xiaomiao
2 parents 295c4118 e2e6a126
......@@ -7,7 +7,7 @@ export function loginIn(username, password) {
method: "post",
});
}
export function loginOut() {
export function logout() {
return request({
url: `${SERVER.MANAGEMENTAPI}/logout`,
method: "post",
......
......@@ -22,7 +22,7 @@
<script>
import sidebarLeft from "./Sidebar/sidebarLeft";
import sidebarRight from "./Sidebar/sidebarRight";
import { loginOut } from "@/api/login.js";
import { logout } from "@/api/login.js";
import { mapGetters } from "vuex";
export default {
components: {
......@@ -34,10 +34,15 @@ export default {
},
methods: {
onCancel() {
loginOut()
logout()
.then((res) => {
sessionStorage.removeItem("token");
this.$router.push("/login");
this.$router.replace({
path: "/login",
query: {
redirect: this.$route.fullPath,
},
});
})
.catch((error) => {
// console.dir(error);
......
......@@ -11,6 +11,7 @@ router.beforeEach(async (to, from, next) => {
NProgress.start();
document.title = getPageTitle(to.meta.title);
let hasAddDict = store.state.dict.addDict;
let hasUser = store.state.user.hasUser;
let hasAddRoute = store.state.permission.addRoutes;
if (to.path == "/login") {
sessionStorage.removeItem("token");
......@@ -19,6 +20,10 @@ router.beforeEach(async (to, from, next) => {
//判断token是否存在
const hasToken = sessionStorage.getItem("token");
if (hasToken) {
//请求用户信息
if (!hasUser) {
store.dispatch("user/getUserInfo");
}
//加载字典
if (!hasAddDict) {
store.dispatch("dict/generateDic");
......@@ -27,7 +32,7 @@ router.beforeEach(async (to, from, next) => {
next();
} else {
//请求菜单
const { result: getMenuData } = await getMenuInfo() || [];
const { result: getMenuData } = (await getMenuInfo()) || [];
const accessRoutes = await store.dispatch(
"permission/generateRoutes",
getMenuData
......
import { getUserInfo } from '@/api/user'
import { getUserInfo } from "@/api/user";
const state = {
name: '',
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
}
hasUser: false,
name: "",
avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
userInfo: null,
};
const mutations = {
SET_NAME: (state, data) => {
state.name = data.loginName
}
}
SET_USERINFO: (state, data) => {
state.hasUser = true;
state.userInfo = data;
state.name = data.loginName;
},
RESET_USER: (state) => {
state.hasUser = false;
},
};
const actions = {
getUserInfo ({ commit }) {
getUserInfo({ commit }) {
if (!state.hasUser) {
return new Promise(async (resolve) => {
let { result: res } = await getUserInfo()
commit('SET_NAME', res)
resolve(true)
})
},
}
let { result: res } = await getUserInfo();
commit("SET_USERINFO", res);
resolve(true);
});
}else{
return
}
},
resetdict({ commit }) {
commit("RESET_USER");
},
};
export default {
namespaced: true,
state,
mutations,
actions
}
namespaced: true,
state,
mutations,
actions,
};
......
/**
* 此文件主要创建 axios 实例,然后添加请求拦截器和响应拦截器
*/
import axios from 'axios'
import { Message } from 'element-ui'
import { endLoadingSubCount } from './requestLoading'
import axios from "axios";
import { Message } from "element-ui";
import { endLoadingSubCount } from "./requestLoading";
import router from "../router";
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
withCredentials: true, //是否允许跨域
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
timeout: 15000
})
baseURL: process.env.VUE_APP_BASE_API,
withCredentials: true, //是否允许跨域
headers: {
"Content-Type": "application/json; charset=utf-8",
},
timeout: 15000,
});
// request interceptor
service.interceptors.request.use(
config => {
//调用登录接口时无token,也不需要传token,其他接口都传入token
config.headers.Authorization = sessionStorage.getItem("token") || "";
config.headers.Accept = 'application/json'
return config
},
error => {
Message.error('请求超时!');
return Promise.reject(error)
}
)
(config) => {
//调用登录接口时无token,也不需要传token,其他接口都传入token
config.headers.Authorization = sessionStorage.getItem("token") || "";
config.headers.Accept = "application/json";
return config;
},
(error) => {
Message.error("请求超时!");
return Promise.reject(error);
}
);
// response interceptor
service.interceptors.response.use(
response => {
/**
* 对响应数据判断:
* 如果成功返回数据,就通过return把数据返出去
* 如果请求不成功,就在拦截器这里统一处理(组件的代码就不用关注错误的情况了)
*/
if (response.status == 200) {
// if (response.data.code == 500) {
// Message({
// message: response.data.message,
// type: 'error',
// duration: 5 * 1000
// })
// }
return response.data;
} else {
handleErrorData(response.data);
}
return response;
},
error => {
endLoadingSubCount()
// 对响应错误做点什么
Message({
message: '服务器异常,请联系管理员',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error);
}
)
//对错误信息的处理函数
function handleErrorData (errMes) {
if (errMes.message) {
Message.error(errMes.message);
(response) => {
/**
* 对响应数据判断:
* 如果成功返回数据,就通过return把数据返出去
* 如果请求不成功,就在拦截器这里统一处理(组件的代码就不用关注错误的情况了)
*/
if (response.status == 200) {
return response.data;
} else {
switch (errMes.code) {
case 401:
Message.error("由于长时间未操作,请重新登录!");
window.location.href = `http://${window.location.host}`
break;
case 403:
Message.error("拒绝访问");
break;
case 404:
Message.error("很抱歉,资源未找到!");
break;
case 500:
Message.error("服务器错误!");
break;
default:
Message.error("服务正在联调中,请稍后!");
break;
}
// 对响应错误做点什么
Message({
message: "请求失败",
type: "error",
duration: 5 * 1000,
});
}
return response;
},
(error) => {
handleErrorData(error.response.status);
endLoadingSubCount();
return Promise.reject(error);
}
);
//对错误信息的处理函数
function handleErrorData(status) {
switch (status) {
case 401:
Message.error("由于长时间未操作,请重新登录!");
router.replace({
path: "/login",
query: {
redirect: router.history.current.fullPath,
},
});
break;
case 403:
Message.error("拒绝访问");
break;
case 404:
Message.error("很抱歉,资源未找到!");
break;
case 500:
Message.error("服务器错误!");
break;
default:
Message.error("服务正在联调中,请稍后!");
break;
}
}
export default service
export default service;
......
......@@ -2,6 +2,7 @@
<div class="bg">
<div class="login-inner-bg login">
<div class="user_style">
<h3>欢迎登录</h3>
<el-form
:model="user"
:rules="rules"
......@@ -79,10 +80,12 @@ export default {
loginIn(self.user.account, self.user.password)
.then((res) => {
if (res.status === 1) {
//存储token
sessionStorage.setItem("token", `Bearer ${res.content}`);
this.$router.push('/');
//登录成功后需判断有无重定向,没有重定向则跳转首页
this.$router.replace(this.$route.query.redirect || "/");
} else {
alert(res.message);
//错误处理
}
})
.catch((error) => {
......@@ -95,25 +98,34 @@ export default {
components: {},
};
</script>
<style scoped>
<style scoped lang="scss">
.bg {
width: 100%;
height: 100%;
background: url(../../image/bg.png) no-repeat;
background: url(../../image/loginBg.jpg) 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;
background: url(../../image/loginBoxBg.png) no-repeat;
width: 400px;
height: 350px;
margin: 35vh auto;
overflow: hidden;
background-size: 100% 100%;
box-sizing: border-box;
padding: 20px;
}
.login .user_style {
margin: 90px 20px 0;
margin: 40px 20px 0;
h3{
color: #fff;
font-weight: normal;
text-align: center;
margin-bottom: 20px;
}
}
.login .btn {
......@@ -139,8 +151,6 @@ export default {
cursor: pointer !important;
background-color: #2d8cf0 !important;
}
</style>
<style>
.inputUser .ivu-input {
padding: 6px 24px !important;
border: 1px solid #9f9f9f !important;
......@@ -164,3 +174,5 @@ export default {
color: #fff;
}
</style>
<style>
</style>
......
......@@ -8,7 +8,16 @@ class data {
{
prop: "state",
label: "状态",
width: '100',
width: '120',
render: (h, scope) => {
return (
<div>
<span class='adopt' v-show={scope.row.state == 3}>上报失败</span>
<span class='adopt' v-show={scope.row.state == 2}>上报成功</span>
<span class='warehousing' v-show={scope.row.state == 1}>接入上报异常</span>
</div>
)
}
},
{
prop: "UPLOADTIME",
......@@ -23,7 +32,7 @@ class data {
prop: "ACCESSDATE",
label: "日期",
width: '150',
},
},
{
prop: "type",
label: "类别",
......