vue3 使用 oidc-client 实现单点登录

第一步、安装 oidc-client

npm install oidc-client

第二步、配置config.js

在public/config.js中新建 authOptions

var authOptions= {
    authority: "https://localhost:5001",	// 认证服务器链接
    client_id: "js",	// 客户端的ID，必选项
    redirect_uri: "https://localhost:5003/callback.vue",	// 回调页面
    response_type: "code",	// 授权类型，必选项
    scope:"openid profile api1",	// 申请的权限范围，可选项
    post_logout_redirect_uri : "https://localhost:5003/index.vue", //退出后返回的页面
};

第三步、创建 oidc.js 工具类

在utils中创建oidc.js文件，内容如下

// 引入安装好的 oidc-client
import Oidc from "oidc-client";

var mgr = new Oidc.UserManager(authOptions); // authOptions 指向public/config.js

// 获取用户信息
export function getUser(){
    return new Promise(((resolve, reject) => {
        mgr.getUser().then(function (user) {
            resolve(user)
        })
        .catch(error =>{
            reject(error)
        });
    }))
}
// 登录
export function login() {
    mgr.signinRedirect();
}
// 取消登录
export function logout() {
    mgr.signoutRedirect();
}

第四步、创建 callback.vue 回调页面

在 views 中新建 callback.vue 页面

<template>
    <div>
        
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Oidc from "oidc-client";
import { useRouter } from 'vue-router'
import { getUser,login,logout } from '@/utils/oidc'
import {setToken} from '@/utils/auth'

const router = useRouter()

onMounted(() =>{
    new Oidc.UserManager({response_mode:"query"}).signinRedirectCallback().then(function() {
        console.log('运行一次')
        getUser().then(res =>{  // 获取token并调用封装好的方法将token存入缓存
            setToken(res.access_token)
        })
        router.push('/')
    }).catch(function(e) {
        console.log(e);
    });
})
</script>

第五步、配置路由守卫

这里简单的配置一下

import { login } from '@/utils/oidc'	// 引入oidc.js 的login() 方法

router.beforeEach(async (to, from, next) => {
    const token = localStorage.getItem('token')
    // 当token为null的时候就调用login()方法登录
    if(token == null && to.path != "/callback"){
        login()
    }else{
        next()
    }
})

到这里就基本完成了，下面测试一下。

第六步、测试

创建 Home.vue 页面

<template>
    <div>
        <el-button @click="logins">登录</el-button>
        <el-button @click="getToken">获取token</el-button>
        <el-button @click="logOut">退出</el-button>
    </div>
</template>
<script setup>
import { getUser,login,logout } from '@/utils/oidc'	// 引入oidc方法
// 登录
const logins = () =>{
    login()
}
// 获取用户信息
const getToken = () =>{
    getUser().then(res =>{
        console.log(res)
    })
}
//退出登录
const logOut = () =>{
    logout()
}
</script>

完成