最近在写后台管理系统，遇到一个需求，就是从系统A带参数可以直接进入到系统B内部。不通过系统B的登录页面进行登录。
一般系统的登录，都需要用户名和密码等参数，然后获取到token信息，最后进入到系统内部。
下面介绍具体实现方式：
1.antd-vue-admin系统——login添加登录新页面
在login文件夹中添加loginOA.vue文件
2.loginOA.vue文件内容如下：
html部分：
<template>
<div></div>
</template>
js部分：
<script>
import {
oaLogin } from '@/services/user';//登录方法，这个要根据后端提供的方法来处理
import {
setAuthorization,
checkAuthorization,
removeAuthorization,
} from '@/utils/request';
import {
parseUrlParams } from '@/utils/util';
export default {
name: 'LoginOA',
data() {
return {
};
},
watch: {
$route: {
handler: function(val, oldVal) {
this.onSubmit();
},
// 深度观察监听
deep: true,
immediate: true,
},
},
methods: {
onSubmit() {
removeAuthorization();
var obj = parseUrlParams(window.location.href);
var token = (obj.token && decodeURIComponent(obj.token)) || '';
var iv = (obj.iv && decodeURIComponent(obj.iv)) || '';
if (!token || !iv) {
this.$message.error('请从无极OA系统登录');
return;
}
oaLogin({
token,
iv,
})
.then((res) => {
if (res.code == 0) {
this.$message.error(`${
res.msg}${
res.data ? ',' + res.data : ''}`);
} else {
this.afterLogin(res);
}
})
.catch(() => {
});
},
afterLogin(res) {
const loginRes = res;
if (loginRes) {
setAuthorization({
token: loginRes.access_token,
expireAt: new Date(new Date().getTime() + loginRes.expires_in),
});
if (checkAuthorization()) {
this.$store.dispatch('account/refreshPermissions', (res) => {
if (res == 'success') {
this.$message.success('登录成功', 3);
this.$router.push('/dashboard');
}
});
}
}
},
},
};
</script>
parseUrlParams 方法如下：
/**
* 解析 url 中的参数
* @param url
* @returns {Object}
*/
export function parseUrlParams(url) {
const params = {
};
if (!url || url === '' || typeof url !== 'string') {
return params;
}
const paramsStr = url.split('?')[1];
if (!paramsStr) {
return params;
}
const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ');
for (let i = 0; i < paramsArr.length / 2; i++) {
const value = paramsArr[i * 2 + 1];
params[paramsArr[i * 2]] =
value === 'true' ? true : value === 'false' ? false : value;
}
return params;
}
3.login文件夹中的index.js文件内容如下：
import LoginOA from './LoginOA';
import Login from './Login';
export default {
LoginOA,
Login,
};
4.在router文件夹中的config.js中添加LoginOA路由
{
path: '/loginOA',
name: '登录页OA',
component: () => import('@/pages/login/LoginOA'),
},
5.将loginOA添加到白名单中——router/index.js中添加
// 不需要登录拦截的路由配置
const loginIgnore = {
names: ['404', '403'], //根据路由名称匹配
paths: [
'/login',
'/loginOA',
], //根据路由fullPath匹配
完成！！！多多积累，多多收获！