最近在写后台管理系统，遇到一个需求，就是从系统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匹配

完成！！！多多积累，多多收获！