Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vuejsoidcclient

Project vueJs with oidc-client library

Create the development environment

Npm:
https://nodejs.org/en/download/

Npm Version Control on Windows:
https://github.com/felixrieseberg/npm-windows-upgrade

Npm Version Control on Linux:
https://github.com/creationix/nvm

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.

Documentation

Oidc-Client:
https://github.com/IdentityModel/oidc-client-js/wiki

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.

API

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 => {
        console.log(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 => response.data)
      .catch(err => {
        console.log(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) {
      mgr.getRole().then(
        sucess => {
          if (to.meta.role == sucess){
            next();
          }else {
            next('/accessdenied');
          }
        },
        err => {
          console.log(err);
        }
      );    
  } else {
    next();
  }
});

About

project vueJs with oidc-client library

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages