Installation

npm i --save git+https://git.unistra.fr/vue/cas-authentication.git#1.4.0

Avec la dernière version du tag que vous souhaitez.

Configuration

Router

Création d'une instance de Vue-Router :

import Vue from 'vue';
import VueRouter from 'vue-router';
import HelloWorld from '@/components/HelloWorld';

Vue.use(VueRouter);

let router = new VueRouter({
  mode: 'history',
  routes: [
      {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld,
        meta: {
          unistraCasAuthentication: true
        }
      },
      {
        path: '/auth/cas/logout',
        name: 'cas_authentication_logout',
      },
  ],
});

Le Router doit être obligatoirement être initialisé à mode: 'history'. Si vous souhaitez utiliser le module de déconnexion, créer au moins une route avec un path et un name, le name sera à passer dans le main.js. Les routes qui seront protégées par CAS, doivent avoir la meta: {unistraCasAuthentication: true}. Cette solution est à privilégier lorsque vous souhaitez avoir des pages qui ne nécessitent pas d'authentification. Si vous souhaitez protéger globalement votre application, préférez l'option appIsAllAuth dans le main.js (cf. le point Ajout du plugin à Vue ci-dessous).

Axios

Création d'une instance d'Axios :

import Vue from 'vue';
import Axios from 'axios';
import VueAxios from 'vue-axios';

let axios = Axios.create();

Vue.use(VueAxios, axios);

L'utilisation de Vue-Axios permet d'intégrer plus facilement Axios dans les variables de notre instance Vue.

Ajout du plugin à Vue

Dans le main.js ou le index.js :

import Vue from 'vue';
import App from '@/App.vue';

import Cas from 'vue-cas-authentication';

[...] //instanciation du router et de Axios

const CasOptions = {
  router: router,
  axios: axios,
  options: {
    appIsAllAuth: true,
    authCasLogoutUrl: 'cas_authentication_logout',
    jwtServerUrl: 'https://jwtserver-pprd.app.unistra.fr/api',
    serverCAS: 'https://cas.unistra.fr',
  },
};

Vue.use(Cas, CasOptions);

Vue.config.productionTip = false;

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

Le plugin va surcharger les instances du Router et d'Axios pour permettre de rajouter des options et des variables spécifiques au projet en cours.

Pour l'attribut authCasLogoutUrl il est nécessaire de mettre la même valeur que dans l'attribut name de la route de déconnexion dans le routeur. L'option appIsAllAuth permet d'indiquer que l'application nécessitera globalement d'une authentification. Si vous faites le choix de cette solution, la méta n'est pas nécessaire au niveau du routeur.