Recently, when I was writing a background management system, I encountered a requirement that I can directly enter the interior of system B with parameters from system A. Log in without going through the login page of system B.
The login of the general system requires parameters such as user name and password, and then obtains tokenthe information, and finally enters the system.
The following describes the specific implementation method:
1. antd-vue-adminSystem - login to add a new login page
loginOA.vueAdd files in login folder
2. The content of the loginOA.vue file is as follows:
html part:
<template>
<div></div>
</template>
js part:
<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 Methods as below:
/**
* 解析 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. The content of the index.js file in the login folder is as follows:
import LoginOA from './LoginOA';
import Login from './Login';
export default {
LoginOA,
Login,
};
LoginOA4. Add routing to config.js in the router folder
{
path: '/loginOA',
name: '登录页OA',
component: () => import('@/pages/login/LoginOA'),
},
5. Will be loginOAadded to the whitelist - add in router/index.js
// 不需要登录拦截的路由配置
const loginIgnore = {
names: ['404', '403'], //根据路由名称匹配
paths: [
'/login',
'/loginOA',
], //根据路由fullPath匹配
Finish! ! ! A lot of accumulation, a lot of harvest!