vue2微软身份验证AAD的代码

Vue2与微软身份验证AAD的代码实现可以通过Vue-CLI来搭建一个基础的Vue2项目，然后通过安装`vue-msal`插件实现。具体步骤如下：

1. 通过Vue-CLI创建一个新的Vue2项目。

vue create my-project

2. 安装`vue-msal`插件。

npm install --save vue-msal

3. 在`main.js`文件中添加以下代码，以配置`vue-msal`插件。

import Vue from 'vue'
import { MsalPlugin } from './plugins/msal'
import App from './App.vue'

Vue.use(MsalPlugin, {
  auth: {
    clientId: 'YOUR_CLIENT_ID',
    authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
    redirectUri: 'http://localhost:8080' // Redirect URI for your app
  },
  cache: {
    cacheLocation: 'localStorage', // This configures where your cache will be stored
    storeAuthStateInCookie: true, // Set this to "true" if you are having issues on IE11 or Edge
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

其中，需要将`YOUR_CLIENT_ID`和`YOUR_TENANT_ID`替换为你在Azure Active Directory中注册应用程序时获取到的客户端ID和租户ID。

4. 在需要进行身份验证的页面或组件中，可以使用`this.$msal`来访问`vue-msal`插件中提供的方法。例如，在一个需要登录才能访问的页面中，可以通过以下代码实现登录功能：

<template>
  <div>
    <button @click="login">Login</button>
  </div>
</template>

<script>
export default {
  methods: {
    async login () {
      try {
        await this.$msal.loginPopup()
        // Login successful, do something here
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>