时间戳

首页 > 解决方案 > 在 Vue.js 下实现 MSAL 2 `loginRedirect`

vue.js - 在 Vue.js 下实现 MSAL 2 `loginRedirect`

问题描述

我正在尝试了解handleRedirectPromiseMSAL 2.0 的登录/注销流程，特别是使用 Vue.js。

我们基于https://github.com/benc-uk/msal-graph-vueloginPopup使用andf实现了 MSAL 的工作实现logoutPopup

这是我们login在 Vue 主页中的调用

async login () {
  await auth.login()
  console.log('aaa')
  this.user = auth.user()
}

它调用以下例程并按预期auth.service填充对象。user

async login () {
  if (!msalApp) {
    return
  }
  await msalApp.loginPopup({
    scopes,
    prompt: 'select_account'
  })
},

转移到loginRedirect需要我们注册一个处理程序handleRedirectPromise()- 据我了解，像这样

  # truncated MSAL registration 
  ...
  function handleResponse (response) {
    if (response) {
      console.log('logged in')
    } else {
      console.log('logged out')
    }
  }
  msalApp = new msal.PublicClientApplication(config)
  msalApp.handleRedirectPromise().then(handleResponse)
},

当我单击登录/注销按钮时触发上述内容，但每当我重新加载页面时也会触发。

具体问题是在Login时我们永远不会返回到loginVue页面的初始方法，所以在确认登录后不要设置该user对象。

标签： vue.jsmsal

解决方案

推荐阅读