import store from './index.js';

Now, just use it as store.state.<module_name>.<state>. Notice: we have to refer the state with additional namespace, the module name registered in store/index.js.

return this.$store.state.roles.roleDetail;

Need to access it with this.$store.

In router/index.js

import store from '../store/index.js';

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) {
    if (store.getters.isAuthenticated) {
      next();
    } else {      
      store.dispatch("login");
    }
  } else {
    next();
  }
});

• Import store just like in plain js file.
  
• When use its getters, since the store does not use namespace, we can just any action, mutation and getters without refering the namespace as we must do for state.
  

this.$router.push({ name: "Home" });

This direct user to router path “Home”.

This ensures the user visits certains pages must login. We control which pages need authentication from Vuejs router.

const enableAuth = true;

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requireAuth: false }
  },
  {
    path: '/permissionManagement',
    name: 'PermissionManagement',
    component: PermissionManagement,
    meta: { requireAuth: enableAuth }
  },  
  {
    path: '/clientManagement',
    name: 'ClientManagement',
    component: ClientManagement,
    meta: {requireAuth: enableAuth}
  }  
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});


router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) {
    if (store.getters.isAuthenticated) {
      next();
    } else {      
      store.dispatch("login");
    }
  } else {
    next();
  }
});

export default router;

• Here, we invoke store.getters.isAuthenticated to test if user has login before routing.
  

• The isAuthenticated is a getter from store/auth.js. Remember, we don’t need to use module name as namespace except state.
  

  isAuthenticated: state => {
    return new Date().getTime() < state.expire_at;
  }
  

Authorization refers the process of check if the user has the permissions, roles or scopes to send API request to certain endpoint of backend API service.

Therefore, this part consist of two part: frontend and backend

• For frontend, we need to ensure to pass the access_token or what ever JWT token which contains scopes you want to check in the request header:
  

  export function postHelper(uri, api, payload, setAuthInfo = true) {
    return new Promise((resolve, reject) => {
      let headersOption = {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      };
  
      if (setAuthInfo) {
        headersOption.Authorization = 'Bearer ' + store.state.auth.selectedPermissionToken;
      }
  
      fetch(`${uri}${api}`,{
        method: 'POST',
        headers: headersOption,            
        body: JSON.stringify(payload)
      })
        .then(handleResponse)
        .then(json => {
          resolve(json);
        })
        .catch(error => {
          console.log(error);
          reject(`${uri}${api} failed. HTTP Status:` + error.status + ' Error: ' + error.statusText);
        });
    });
  }
  
  export function getHelper(uri, api, payload) {
    return new Promise((resolve, reject) => {
      fetch(`${uri}${api}`,{
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + store.state.auth.selectedPermissionToken
        }
      })
        .then(handleResponse)
        .then(json => {
          resolve(json);
        })
        .catch(error => {
          console.log(error);
          reject(`${uri}${api} failed. HTTP Status:` + error.status + ' Error: ' + error.statusText);
        });
    });
  }
  

  • Since send request to backend and process it is so common, we create these two helper functions to help to send request and process the response. To use them:
    

    return await postHelper(`${getApiUrl()}`, `/api/auth/inspectMe`, {
      'access_token': this.state.auth.access_token
    }, false);
    
    let result =  await getHelper(`${getApiUrl()}`, '/api/roleManagement/listAllRoles');
    commit("setAllRoles", result);
    

  • Embed token into Authorization header: 'Authorization': 'Bearer ' + store.state.auth.selectedPermissionToken.
    

• For backend, we use check the token from middleware: 1) verify the token 2) check its scopes against endpoint scope defined.
  

  const jwt = require('jsonwebtoken');
  const jwtSignKey = process.env.jwtSignKey;
  
  // Defines route path and its permissions/scopes required
  export const authPermissionsMap: any = {
    "listAllUsers": "UserView",
    "addRolesToUser": "UserModify RoleView",
  }
  
  export const checkAuth = (req: any, res:any, next:any) => {
      console.log(">> enAuth: ", enableAuth);
      if(!enableAuth) {
          next();
      } else {
          console.log(">> check middleware");
          let bearerToken = req.headers.authorization;
          console.log(">> bearerToken: ", bearerToken);
          let permissionsToken = bearerToken.slice(bearerToken.indexOf(' ') + 1);
          console.log(">> permissionsToken:", permissionsToken);
          // jwtSignKey is the key used to sign the token
          try {
              let result = jwt.verify(permissionsToken, Buffer.from(jwtSignKey, 'base64'));
              console.log(">> jwt.verify result:", result);
  
              console.log(">> userPermissions:", result.scope);
              let route = req.route.path;
              console.log(">> request.route:", route);
  
              let key = route.slice(route.lastIndexOf("/") + 1);
              let neededPermissions = authPermissionsMap[key];
  
  
              if (!neededPermissions) {
                  // If we didn't specify route in authPermissionsMap, then we let it pass.
                  console.log(`>> ${key} does not need to check permissions`);
                  next();
              } else if (checkPermissions(result.scope, neededPermissions)) {
                  console.log(">> permission granted.");
                  next();
              } else {
                  console.log(">> You do not have enough permissions.");
                  res.status(403).json({message: "You do not have enough permissions."});
              }
          } catch(err) {
              console.log(">> jwt.verify error:", err.message);
              res.status(403).json({tokenVerifyError: err.message});
          }
      }
  };
  
  const checkPermissions = (userPermissions: string, neededPermissions: string): boolean => {
      console.log(">> userPermissions: ", userPermissions);
      console.log(">> neededPermissions: ", neededPermissions);
  
      if (!userPermissions) {
          return false;
      }
  
      if (userPermissions.includes("AllAccess")) {
          return true;
      }
  
      let permissions = neededPermissions.split(" ");
      return permissions.every((each: string)=>{
          return userPermissions.includes(each);
      });
  }
  

  The code self-explaines the process. However, this depends on my understanding, espeically on the auth-provider we used.
  

  For different auth-provider and different access_token or id_token, you may need to use different function to do the token verification. Here is another example to verify token:
  

  /// Packages required 
  var jwt = require('jsonwebtoken');
  var jwksClient = require('jwks-rsa');
  
  // More about caching certificates: https://github.com/auth0/node-jwks-rsa as a way to fetch the keys.
  var client = jwksClient({
    cache: true,
    jwksUri: '<Usually_this_is_auth_provider/certs>'
  });
  
  var token = "ID_TOKEN / ACCESS_TOKEN";
  
  // Verify the token
  jwt.verify(token, getKey, {}, function (err, decoded) {
    if (decoded) {
      // Here you will find decoded token
      console.log(decoded);
    }
    if (err) {
      console.log('Unable to Verify with error ', err);
    }
  });
  
  function getKey(header, callback) {
    client.getSigningKey(header.kid, function (err, key) {
      var signingKey = key.publicKey || key.rsaPublicKey;
      callback(null, signingKey);
    });
  }