Skip to content
project vueJs with oidc-client library
JavaScript Other
Branch: master
Clone or download
Latest commit c30d317 Feb 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src code optimization Jan 17, 2019
static update oidc-client package Jan 15, 2019
test update the project to the webpack 4 Nov 19, 2018
.babelrc update the project to the webpack 4 Nov 19, 2018
.eslintignore update the project to the webpack 4 Nov 19, 2018
.eslintrc.js update the project to the webpack 4 Nov 19, 2018
.gitignore update the project to the webpack 4 Nov 19, 2018
LICENSE Create License Nov 20, 2018 update Feb 21, 2019
index.html update the project to the webpack 4 Nov 19, 2018
package-lock.json update package.json Jan 17, 2019
package.json update package.json Jan 17, 2019


Project vueJs with oidc-client library

Create the development environment


Npm Version Control on Windows:

Npm Version Control on Linux:

Technology Version

Version of npm used in the project: 6.5.0
Version of oidc-client: 1.6.1

Identity Provider

The configuration for the examples are based on running IdentityServer4 on localhost. A ready-to-go reference implementation for testing purposes can be found at IdentityServer4AndApi.



Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run prod

Connection with identity provider

Change the parameters of the variable mgr of the script SecurityService.js to the values of your identity provider.

var mgr = new Oidc.UserManager({
  userStore: new Oidc.WebStorageStateStore(),  
  authority: 'https://localhost:44321',
  client_id: 'vuejsclient',
  redirect_uri: window.location.origin + '/static/callback.html',
  response_type: 'id_token token',
  scope: 'openid profile address roles identityserver4api country subscriptionlevel offline_access',
  post_logout_redirect_uri: window.location.origin + '/index.html',
  silent_redirect_uri: window.location.origin + '/static/silent-renew.html',
  accessTokenExpiringNotificationTime: 10,
  automaticSilentRenew: true,
  filterProtocolClaims: true,
  loadUserInfo: true

The script SecurityService.js contains triggers and methods from the oidc-client library.


The script ApiService.js is responsible for making requests to an API using the libraries oidc-client and axios

The baseUrl constant receives the static part of the API Url.

const baseUrl = 'https://localhost:44390/api/';

The defineHeaderAxios() method appends the access teken to the axios head.

async defineHeaderAxios () {
    await user.getAcessToken().then(
      acessToken => {
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + acessToken
      }, err => {

The getAll() method makes a get request. It receives as a parameter a string that will be concatenated with the baseUrl constant by forming the API Url.

async getAll(api){
    await this.defineHeaderAxios() 
    return axios
      .get(baseUrl + api)
      .then(response =>
      .catch(err => {

Route protection

The script index.js is responsible for managing the application routes using the vue router. Each route has a field called meta. Meta receives two parameters: requiresAuth and role.

  • requiresAuth[Bollean]: Responsible for protecting the route
  • role[String]: Users with this role will be allowed to access the route
  path: '/payinguser',
  name: 'PayingUser',
  component: PayingUser,
  meta: {
	requiresAuth: true,
	role: ['PayingUser']
  path: '/freeuser',
  name: 'FreeUser',
  component: FreeUser,
  meta: {
	requiresAuth: true,
	role: ['FreeUser']

At each transition of routes in the application, the router.beforeEach() method of the script index.js is called. This method checks whether the user who is logged in is allowed to access the route. It does this by comparing the role of the user and the role of the route.

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth) {
        sucess => {
          if (to.meta.role == sucess){
          }else {
        err => {
  } else {
You can’t perform that action at this time.