IdentityServer--vue

最新推荐文章于 2025-01-18 10:21:13 发布

转载最新推荐文章于 2025-01-18 10:21:13 发布 · 621 阅读

文章标签：

#个人笔记

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用oidc-client库在项目中实现身份验证流程，包括安装库、配置认证参数、处理登录与登出操作及获取用户信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装oidc-client库

npm install oidc-client

项目开启页

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

<script>
import Oidc from 'oidc-client'
var config = {
  authority: 'http://localhost:9000',   
  client_id: 'adminweb',     
  redirect_uri: 'http://localhost:8090/#/callback',
  response_type: 'code',
  scope: 'openid profile offline_access aspid',
  post_logout_redirect_uri: 'http://localhost:8090'
}
var mgr = new Oidc.UserManager(config)
export default {
  beforeCreate () {
    mgr.signinRedirect()
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style>

</style>

登录后跳转页`

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

<script>
import Oidc from 'oidc-client'
new Oidc.UserManager({response_mode: 'query'})
  .signinRedirectCallback()
  .then(function () {
    // debugger
    window.location.replace('/#/home/index')
  })
  .catch(function (e) {

  })
export default {

}
</script>

<style>

</style>

项目主页

<template>
  <div>
    <button @click="api">查看token</button>
    <pre>{{res}}</pre>
  </div>
</template>

<script>
import Oidc from 'oidc-client'

var config = {
  authority: 'http://localhost:9000',
  client_id: 'adminweb',
  redirect_uri: 'http://localhost:8090/#/callback',
  response_type: 'code',
  scope: 'openid profile offline_access aspid',
  post_logout_redirect_uri: 'http://localhost:8090'
}
var mgr = new Oidc.UserManager(config)
export default {
  data () {
    return {
      res: 'My Home'
    }
  },

  methods: {
    api () {
      mgr.getUser().then(user => {
        console.log(user)
        if (user) {
        // this.res = ("User logged in", user.profile);注意闭包
          this.res = ('User logged in', user)
        } else {
          this.res = ('User not logged in')
        }
      })
    },
    refresh () {

    }
  },
  mounted () {
  }
}
</script>

<style scoped>
</style>

退出登录

路由配置