Vue.js与Identity Server 4集成：实现直接跳转登录页需求

我刚好处理过类似的场景，给你分享一套落地的实现方案，完全能满足你要的「用户一打开客户端URL就自动跳转到IS4登录页」的需求，核心就是靠Vue的全局路由守卫结合认证库的状态检查来实现：

1. 先确认认证库的基础配置 #

首先你应该已经集成了oidc-client（或者封装好的Vue插件比如vue-oidc-client），先把IS4的认证配置搞对，比如：

// src/auth/config.js
export const oidcConfig = {
  authority: 'https://你的Identity Server地址',
  client_id: '你的客户端ID',
  redirect_uri: 'https://你的客户端地址/callback',
  response_type: 'code',
  scope: 'openid profile 你的API权限',
  post_logout_redirect_uri: 'https://你的客户端地址/logout'
};

这里要注意redirect_uri必须在IS4的客户端配置里添加到允许列表，不然会触发认证错误。

2. 用全局路由守卫做强制拦截 #

在Vue的路由配置里，全局前置守卫beforeEach是关键——每次用户访问任何路由，我们都先检查是否已经登录，如果没登录就直接触发IS4的跳转：

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import { UserManager } from 'oidc-client';
import { oidcConfig } from '../auth/config';

Vue.use(VueRouter);

// 你的路由配置，注意不需要单独的本地登录页路由
const routes = [
  { path: '/callback', component: () => import('../views/Callback.vue') }, // IS4回调专用页
  { path: '/admin', component: () => import('../views/Admin.vue'), meta: { requiresAuth: true } }, // 你的管理员页面
];

const router = new VueRouter({ routes });

// 实例化oidc的用户管理器
const userManager = new UserManager(oidcConfig);

// 全局路由拦截逻辑
router.beforeEach(async (to, from, next) => {
  // 先获取当前登录状态
  const currentUser = await userManager.getUser();
  
  // 如果没登录，而且访问的不是回调页（回调页是IS4跳回来处理认证的，不能拦截）
  if (!currentUser && to.path !== '/callback') {
    // 直接跳去IS4的登录页
    await userManager.signinRedirect();
    return; // 这里要return，阻止后续路由跳转，等待登录回调
  }
  
  // 已经登录或者是回调页，正常放行
  next();
});

export default router;

3. 处理IS4的登录回调 #

回调页Callback.vue的作用就是接收IS4返回的认证结果，完成登录流程，然后跳转到管理员页面：

<template>
  <div>正在处理登录，请稍等...</div>
</template>

<script>
import { UserManager } from 'oidc-client';
import { oidcConfig } from '../auth/config';

export default {
  async mounted() {
    const userManager = new UserManager(oidcConfig);
    try {
      // 处理回调，拿到用户信息
      await userManager.signinRedirectCallback();
      // 登录成功，跳去管理员页面
      this.$router.push('/admin');
    } catch (err) {
      console.error('登录失败了:', err);
      // 出错的话可以重新触发登录，或者跳个错误提示页
      await userManager.signinRedirect();
    }
  }
};
</script>

4. 一些额外的小提示 #

• 如果后续要加公开页面（比如首页），可以给路由加meta: { public: true }，然后在路由守卫里判断：if (!currentUser && to.path !== '/callback' && !to.meta.public)，这样公开页面就不会被拦截。
• 可以把userManager封装成全局插件，比如在main.js里注册，这样组件里不用每次都实例化，直接用this.$userManager调用更方便。
• 记得在IS4的客户端配置里，把redirect_uri和post_logout_redirect_uri都添加到允许的回调地址列表里，不然会出现跨域或者认证失败的问题。

这样配置完之后，用户只要访问你的客户端任何地址，都会自动跳去IS4的登录页，登录完成后自动回到管理员页面，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Rasik