为了解决这个问题，我依靠 ADAL JS。我已经提供了一个 Vue + Vue-Router 示例应用程序here - 但我将在下面包含重要的部分。
在你的 package.json 中：
"dependencies": {
"adal-angular": "^1.0.15",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
ADAL JS 库的基本包装模块：
import AuthenticationContext from 'adal-angular/lib/adal.js'
const config = {
tenant: 'your aad tenant',
clientId: 'your aad application client id',
redirectUri: 'base uri for this application',
cacheLocation: 'localStorage'
};
export default {
authenticationContext: null,
/**
* @return {Promise}
*/
initialize() {
this.authenticationContext = new AuthenticationContext(config);
return new Promise((resolve, reject) => {
if (this.authenticationContext.isCallback(window.location.hash) || window.self !== window.top) {
// redirect to the location specified in the url params.
this.authenticationContext.handleWindowCallback();
}
else {
// try pull the user out of local storage
let user = this.authenticationContext.getCachedUser();
if (user) {
resolve();
}
else {
// no user at all - go sign in.
this.signIn();
}
}
});
},
/**
* @return {Promise.<String>} A promise that resolves to an ADAL token for resource access
*/
acquireToken() {
return new Promise((resolve, reject) => {
this.authenticationContext.acquireToken('<azure active directory resource id>', (error, token) => {
if (error || !token) {
return reject(error);
} else {
return resolve(token);
}
});
});
},
/**
* Issue an interactive authentication request for the current user and the api resource.
*/
acquireTokenRedirect() {
this.authenticationContext.acquireTokenRedirect('<azure active directory resource id>');
},
/**
* @return {Boolean} Indicates if there is a valid, non-expired access token present in localStorage.
*/
isAuthenticated() {
// getCachedToken will only return a valid, non-expired token.
if (this.authenticationContext.getCachedToken(config.clientId)) { return true; }
return false;
},
/**
* @return An ADAL user profile object.
*/
getUserProfile() {
return this.authenticationContext.getCachedUser().profile;
},
signIn() {
this.authenticationContext.login();
},
signOut() {
this.authenticationContext.logOut();
}
}
在应用程序的入口点（如果您使用 vue-cli，则为 main.js）：
import Vue from 'vue'
import App from './App'
import router from './router'
import authentication from './authentication'
// Init adal authentication - then create Vue app.
authentication.initialize().then(_ => {
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});
});
对于您的 Vue 路由器配置：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import authentication from '../authentication'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
requiresAuthentication: true
}
}
]
})
// Global route guard
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuthentication)) {
// this route requires auth, check if logged in
if (authentication.isAuthenticated()) {
// only proceed if authenticated.
next();
} else {
authentication.signIn();
}
} else {
next();
}
});
export default router;
在你的 Vue 组件中：
import authentication from './authentication'
...
computed: {
isAuthenticated() {
return authentication.isAuthenticated();
}
},
methods: {
logOut() {
authentication.signOut();
}
}
将访问令牌添加到请求标头
以下是 vue-resource http 拦截器的示例，但任何方法都可以。
Vue.http.interceptors.push(function (request, next) {
auth.acquireToken().then(token => {
// Set default request headers for every request
request.headers.set('Content-Type', 'application/json');
request.headers.set('Ocp-Apim-Subscription-Key', 'api key');
request.headers.set('Authorization', 'Bearer ' + token)
// continue to next interceptor
next();
});
});
希望这可以节省一些时间:)