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