加入路由守卫和退出系统功能。
This commit is contained in:
parent
4ecbc2e630
commit
d995251d7b
|
@ -2,7 +2,7 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-12-15 11:11:21
|
* @Date: 2022-12-15 11:11:21
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2023-01-10 20:49:35
|
* @LastEditTime: 2023-01-11 09:18:29
|
||||||
* @FilePath: \AdminSys\src\main\java\com\cpic\xim\web\controllers\account\P13AccountCheckController.java
|
* @FilePath: \AdminSys\src\main\java\com\cpic\xim\web\controllers\account\P13AccountCheckController.java
|
||||||
* @Description: P13账号验证用Controller。
|
* @Description: P13账号验证用Controller。
|
||||||
*
|
*
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2023-01-04 11:39:04
|
* @Date: 2023-01-04 11:39:04
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2023-01-09 15:33:54
|
* @LastEditTime: 2023-01-11 17:07:13
|
||||||
* @FilePath: \admin_system\src\layout\components\Header.vue
|
* @FilePath: \admin_system\src\layout\components\Header.vue
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
|
@ -23,7 +23,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ElMessage } from "element-plus";
|
//import { ElMessage } from "element-plus";
|
||||||
|
import { Logout } from "../../utils/api/info/account";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AppBanner",
|
name: "AppBanner",
|
||||||
|
@ -41,13 +42,14 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
logout()
|
logout()
|
||||||
{
|
{
|
||||||
ElMessage({
|
this.$confirm("是否退出系统?", "提示", {
|
||||||
message: "退出系统",
|
confirmButtonText: "是",
|
||||||
type: "error",
|
cancelButtonText: "否",
|
||||||
center: true,
|
type: "warning",
|
||||||
|
}).then(() =>
|
||||||
|
{
|
||||||
|
Logout();
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$store.commit("app/SET_ASIDE_COLLAPSE");
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-12-14 15:12:46
|
* @Date: 2022-12-14 15:12:46
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2023-01-07 11:54:38
|
* @LastEditTime: 2023-01-11 10:28:24
|
||||||
* @FilePath: \admin_system\src\router\index.js
|
* @FilePath: \admin_system\src\router\index.js
|
||||||
* @Description: 定义应用路由配置
|
* @Description: 定义应用路由配置
|
||||||
*
|
*
|
||||||
|
@ -15,7 +15,7 @@ const routes = [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "Root",
|
name: "Root",
|
||||||
redirect: "Home",
|
redirect: "Login", //默认路由指向登录页面
|
||||||
hidden: true,
|
hidden: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -99,4 +99,22 @@ const router = createRouter({
|
||||||
routes
|
routes
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//前置路由守卫
|
||||||
|
router.beforeEach((to) =>
|
||||||
|
{
|
||||||
|
const token = window.localStorage.getItem("token");
|
||||||
|
|
||||||
|
if (!token)
|
||||||
|
{
|
||||||
|
//如果token不存在,判断路由是否走向login,如果不是则指向login
|
||||||
|
//走向login则不干预
|
||||||
|
if (to.name !== "Login")
|
||||||
|
{
|
||||||
|
return {
|
||||||
|
name: "Login",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-12-14 15:12:46
|
* @Date: 2022-12-14 15:12:46
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2023-01-08 11:07:02
|
* @LastEditTime: 2023-01-11 14:20:04
|
||||||
* @FilePath: \admin_system\src\store\index.js
|
* @FilePath: \admin_system\src\store\index.js
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
|
@ -11,8 +11,10 @@
|
||||||
import { createStore } from 'vuex';
|
import { createStore } from 'vuex';
|
||||||
import app from "./modules/app";
|
import app from "./modules/app";
|
||||||
|
|
||||||
export default createStore({
|
const store = createStore({
|
||||||
modules: {
|
modules: {
|
||||||
app,
|
app,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export default store;
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2023-01-07 22:25:43
|
* @Date: 2023-01-07 22:25:43
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2023-01-09 15:21:21
|
* @LastEditTime: 2023-01-11 09:44:46
|
||||||
* @FilePath: \admin_system\src\store\modules\app.js
|
* @FilePath: \admin_system\src\store\modules\app.js
|
||||||
* @Description: vuex中存放全局数据的模块
|
* @Description: vuex中存放全局数据的模块
|
||||||
*
|
*
|
||||||
|
@ -11,6 +11,7 @@
|
||||||
const state = {
|
const state = {
|
||||||
count: 1001,
|
count: 1001,
|
||||||
asideBarCollapse: false, //侧边栏折叠标志位
|
asideBarCollapse: false, //侧边栏折叠标志位
|
||||||
|
userInfo: null, //用户信息和token
|
||||||
};
|
};
|
||||||
const getters = {};
|
const getters = {};
|
||||||
const mutations = {
|
const mutations = {
|
||||||
|
@ -22,6 +23,10 @@ const mutations = {
|
||||||
{
|
{
|
||||||
state.asideBarCollapse = !state.asideBarCollapse;
|
state.asideBarCollapse = !state.asideBarCollapse;
|
||||||
},
|
},
|
||||||
|
SET_USERINFO(state, userInfo)
|
||||||
|
{
|
||||||
|
state.userInfo = userInfo;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
const actions = {};
|
const actions = {};
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-12-22 09:10:20
|
* @Date: 2022-12-22 09:10:20
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2022-12-23 17:26:37
|
* @LastEditTime: 2023-01-11 17:02:15
|
||||||
* @FilePath: \admin_system\src\utils\api\info\account.js
|
* @FilePath: \admin_system\src\utils\api\info\account.js
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
|
@ -10,6 +10,8 @@
|
||||||
*/
|
*/
|
||||||
import instance from "@/utils/api/request";
|
import instance from "@/utils/api/request";
|
||||||
import { API_URL } from "@/utils/api/config"; //所有API的地址
|
import { API_URL } from "@/utils/api/config"; //所有API的地址
|
||||||
|
import router from "../../../router/index";
|
||||||
|
import store from "../../../store/index";
|
||||||
|
|
||||||
export function Login(userInfo)
|
export function Login(userInfo)
|
||||||
{
|
{
|
||||||
|
@ -24,3 +26,22 @@ export function Login(userInfo)
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function Logout()
|
||||||
|
{
|
||||||
|
// if (this.$store && this.$store.state.app)
|
||||||
|
// {
|
||||||
|
// //this.$store.commit();
|
||||||
|
// }
|
||||||
|
|
||||||
|
//const store = useStore();
|
||||||
|
|
||||||
|
//console.log(store);
|
||||||
|
|
||||||
|
console.log(store);
|
||||||
|
|
||||||
|
window.localStorage.removeItem("token");
|
||||||
|
window.localStorage.removeItem("user_info");
|
||||||
|
|
||||||
|
router.replace("/login");
|
||||||
|
}
|
||||||
|
|
|
@ -2,13 +2,14 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-12-22 17:18:10
|
* @Date: 2022-12-22 17:18:10
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2022-12-22 20:47:10
|
* @LastEditTime: 2023-01-11 14:58:44
|
||||||
* @FilePath: \admin_system\src\utils\api\request.js
|
* @FilePath: \admin_system\src\utils\api\request.js
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||||||
*/
|
*/
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import store from "../../store/index";
|
||||||
|
|
||||||
const service = axios.create(
|
const service = axios.create(
|
||||||
{
|
{
|
||||||
|
@ -21,6 +22,23 @@ const service = axios.create(
|
||||||
service.interceptors.request.use(
|
service.interceptors.request.use(
|
||||||
function (config)
|
function (config)
|
||||||
{
|
{
|
||||||
|
//axios拦截器请求,在请求的header加上用户名和token
|
||||||
|
if (store.state.app.userInfo)
|
||||||
|
{
|
||||||
|
//如果userInfo存在,则加上用户名和token
|
||||||
|
const username = store.state.app.userInfo.user_info.p13uid;
|
||||||
|
const token = store.state.app.userInfo.token;
|
||||||
|
|
||||||
|
config.headers["token"] = token;
|
||||||
|
config.headers["username"] = username;
|
||||||
|
|
||||||
|
console.log("拦截器,加上username和token!", username, token);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
console.log("拦截器,userinfo为空!");
|
||||||
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
function (error)
|
function (error)
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
* @Author: Kane
|
* @Author: Kane
|
||||||
* @Date: 2022-12-14 15:23:54
|
* @Date: 2022-12-14 15:23:54
|
||||||
* @LastEditors: Kane
|
* @LastEditors: Kane
|
||||||
* @LastEditTime: 2023-01-10 21:12:02
|
* @LastEditTime: 2023-01-11 14:40:11
|
||||||
* @FilePath: \admin_system\src\views\account\Login.vue
|
* @FilePath: \admin_system\src\views\account\Login.vue
|
||||||
* @Description:
|
* @Description:
|
||||||
*
|
*
|
||||||
|
@ -56,6 +56,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { Login } from "@/utils/api/info/account";
|
import { Login } from "@/utils/api/info/account";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
|
import router from "../../router/index";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "loginPage",
|
name: "loginPage",
|
||||||
|
@ -94,17 +95,30 @@ export default {
|
||||||
},
|
},
|
||||||
login()
|
login()
|
||||||
{
|
{
|
||||||
|
if (this.loginForm.username.length === 0 || this.loginForm.password === 0)
|
||||||
|
{
|
||||||
|
ElMessage({
|
||||||
|
message: "请填写您的P13账号和密码!",
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.submit_btn_disable = true;
|
this.submit_btn_disable = true;
|
||||||
this.submit_btn_loading = true;
|
this.submit_btn_loading = true;
|
||||||
|
|
||||||
const userInfo = {
|
const userInfo = {
|
||||||
p13account: "588",
|
p13account: this.loginForm.username,
|
||||||
password: "Kane@1983",
|
password: this.loginForm.password,
|
||||||
};
|
};
|
||||||
|
|
||||||
Login(userInfo)
|
Login(userInfo)
|
||||||
.then((response) =>
|
.then((response) =>
|
||||||
{
|
{
|
||||||
|
//成功获取到返回值时的响应函数,要判断返回值的成功标志
|
||||||
|
//验证成功,将获取到的token和用户信息保存到vuex和localStoreage
|
||||||
|
//然后router.push,进行路由跳转到控制台
|
||||||
const data = response.data;
|
const data = response.data;
|
||||||
|
|
||||||
//判断是否成功,显示提示信息
|
//判断是否成功,显示提示信息
|
||||||
|
@ -117,21 +131,29 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
this.staffInfo = data.staffInfo;
|
this.staffInfo = data.staffInfo;
|
||||||
|
|
||||||
|
//保存用户信息和token
|
||||||
|
this.saveUserInfo(data);
|
||||||
|
|
||||||
|
//验证成功,跳转路由
|
||||||
|
router.push("/home");
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
//验证失败
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: data.message,
|
message: data.message,
|
||||||
type: "error",
|
type: "error",
|
||||||
center: true,
|
center: true,
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
this.submit_btn_disable = false;
|
this.submit_btn_disable = false;
|
||||||
this.submit_btn_loading = false;
|
this.submit_btn_loading = false;
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
.catch((error) =>
|
||||||
{
|
{
|
||||||
|
//没有获取到响应数据
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
|
||||||
ElMessage({
|
ElMessage({
|
||||||
|
@ -143,13 +165,30 @@ export default {
|
||||||
this.submit_btn_disable = false;
|
this.submit_btn_disable = false;
|
||||||
this.submit_btn_loading = false;
|
this.submit_btn_loading = false;
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
saveUserInfo(userInfo) //将获取到的用户信息和token保存到vuex和localStorage
|
||||||
|
{
|
||||||
|
//保存到vuex
|
||||||
|
this.$store.commit("app/SET_USERINFO", userInfo);
|
||||||
|
|
||||||
|
//保存到localStorage
|
||||||
|
const token = userInfo.token;
|
||||||
|
const userInfoJson = JSON.stringify(userInfo);
|
||||||
|
|
||||||
|
window.localStorage.setItem("token", token);
|
||||||
|
window.localStorage.setItem("user_info", userInfoJson);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created()
|
created()
|
||||||
{
|
{
|
||||||
//初始化菜单选项
|
//初始化菜单选项
|
||||||
this.current_menu = this.tab_menu[0].type;
|
this.current_menu = this.tab_menu[0].type;
|
||||||
}
|
},
|
||||||
|
mounted()
|
||||||
|
{
|
||||||
|
//清理状态
|
||||||
|
this.$store.state.app.userInfo = null;
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue