@mccowngordon/vue-secure-token v0.5.111
McCownGordon Construction Vue Secure Token
Description
Securely handles API authentication between Vue.js / Sharepoint Framework Extensions projects (SPFX) and Azure Functions using Active Directory Provider tokens.
- Dynamically adds a vuex module to your store called SecureToken
- Provides Vue.axios() and Vue.apiHandler() methods
- Includes wrapper component
<RenderComponent>
that displays loading indicator and friendly error message
SecureToken store
Getter | Description |
---|---|
sharepointContext | spfx this.context |
apiBaseUrl | Depending on the environment, for example: http://localhost:7071/api/RewardsRecognition or https://mgcforms.azurewebsites.net/api/RewardsRecognition |
environment | 'local' or 'production' |
token | jwt encoded token |
serverError | true or false - the apiHandler() method will update this if an error occurs |
unauthorized | true or false - the apiHandler() method will update this if the server returns a 401 response |
waitingOnServer | true or false - starts out as true and gets updated to false after apiHandler() method finishes with either status 200 or an error |
Setup
install:
# NPM
npm install @mccowngordon/vue-secure-token --save
Import the package:
In projectNameWebParts.ts
import VueSecureToken, { VueSecureTokenConfig } from '@mccowngordon/vue-secure-token';
And initialize inside the render()
method:
const vueSecureTokenConfig: VueSecureTokenConfig = {
store,
spContext: this.context,
localFunctionAppRoot: "http://localhost:7071/api/RewardsRecognition"
azureFunctionAppRoot: "https://mgcforms.azurewebsites.net/api/RewardsRecognition"
};
Vue.use(VueSecureToken, vueSecureTokenConfig);
Update types in your project
types/vue/shims-vue.d.ts:
import { AxiosStatic } from "axios";
import { ApiHandler } from '@mccowngordon/vue-secure-token';
declare module 'vue/types/vue' {
interface VueConstructor {
axios: AxiosStatic,
apiHandler: ApiHandler
}
}
Usage
Anytime you want to call the MGC Function api:
// If first request is an error because of an expired token,
// retryFunc is called after retrieving a new valid token
const retryFunc = () => this.context.dispatch('fetchInitData');
Vue.apiHandler({
method: 'get',
url: 'giftsAndCards',
waitingIndicator: true,
})
.then((response) => {
this.context.commit('SET_GIFTS_AND_CARDS', response.data);
})
.catch((err) => {
if (err.message.includes(401)) {
this.context.commit('SET_UNAUTHORIZED');
} else {
this.context.commit('SET_SERVER_ERROR');
}
});
How to use custom errors
if (typeof response === 'object' && response.toString().includes('403')) {
// this is a forbidden response/error
this.context.dispatch(
'SecureToken/setCustomError',
{
set: true,
message: 'Sorry you are not authorized to access this application.',
type: 'Error',
},
{
root: true,
},
);
} else {
this.context.commit('SET_SUBMISSIONS', response.data);
this.context.commit('SET_FETCHED');
if (!this._statusFilter) {
this.context.commit('SET_FILTER_SUBMISSIONS', this._filters[0]);
}
return true;
}
Display an error (from a Vue Component)
this.$store.dispatch(
'SecureToken/setCustomError',
{
set: true,
message: 'Error loading calendar. Please contact the IT Department with this error message. 87400.',
type: 'Error',
},
{
root: true,
},
);
Clear errors (from a Vue Component)
this.$store.dispatch(
'SecureToken/setCustomError',
{
set: false,
message: null,
type: null,
},
{
root: true,
},
);
How to manually toggle the waiting indicator
// loading indicator from separate module
@secureToken.Action
public setWaitingOnServer;
this.setWaitingOnServer(true);
To Publish An Update
Currently this project is not in its own git repo. @TODO Save it as its own repo
run npm run build ; npm publish
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago