介绍
由于目前Nuxt 3中没有内置的身份验证库,因此我正在尝试创建自己的组合函数useAuth。
问题
当尝试调用loginRedirect或loginPopup方法时,我遇到了startPerformanceMeasurement错误。
Uncaught (in promise) TypeError: this.startPerformanceMeasurement is not a function
at PerformanceClient2.startMeasurement (PerformanceClient.ts:100:45)
at BrowserPerformanceClient2.startMeasurement (BrowserPerformanceClient.ts:46:55)
at RedirectClient2.<anonymous> (StandardInteractionClient.ts:204:64)
at step (_tslib.js:87:23)
at Object.next (_tslib.js:68:53)
at _tslib.js:61:71
at new Promise (<anonymous>)
at __awaiter (_tslib.js:57:12)
at StandardInteractionClient2.getDiscoveredAuthority (StandardInteractionClient.ts:202:115)
at RedirectClient2.<anonymous> (StandardInteractionClient.ts:142:48)
Code
composables/useAuth.js
import * as msal from '@azure/msal-browser'
let state = {
authService: null,
}
export const useAuth = () => {
// use public configuration from nuxt
var config = useAppConfig();
//create authentication instance
state.authService = new msal.PublicClientApplication(config.msalConfig);
//return signIn method
return {
signIn
}
}
const signIn = async () => {
const tokenRequest = {
scopes: [
'openid',
'offline_access',
'Users.Read'
],
}
const response = await state.authService
.loginRedirect(tokenRequest)
.then(() => {
})
.catch(err => {
console.log(err) //TypeError: this.startPerformanceMeasurement is not a function
});
}
Index.vue
<script setup>
if(process.client) {
const auth = useAuth()
auth.signIn()
}
</script>