@mcity/mcity-vue-auth v1.3.7

vue-common-files

Common vue files used across Mcity projects.

Usage

Env Setup

• Create file .env.local if it does not already exist.
• Add the following variables to this file.

  VUE_APP_MIXPANEL_TOKEN=value
  VUE_APP_OAUTH_KEY=value
  VUE_APP_HOST=http://localhost:8080
  VUE_APP_OAUTH_SERVER=https://keys.um.city/
  VUE_APP_REDIRECT_URI=http://localhost:8080/authorized
  VUE_APP_OAUTH_SCOPE=email+roles

App Setup

• After the default router view in the App.vue template, add a named router view to App.vue with <router-view name="auth"/>
• Import authRefresh component with import authRefresh from 'mcity-vue-auth/components/RefreshAuthiFrame.vue'
• In the template of App.vue, after the router-view, add the imported authRefresh component

  <auth-refresh
    v-if="getShowIframe"
    adminRole="PROJECTADMIN"
  >
  </auth-refresh>

Router Setup

• Import AuthComponent into the Vue Router index.js file with import 'AuthComponent' from 'mcity-vue-auth/components/AuthComponent.vue'
• Add a new top-level route, /authorized

  {
    path: '/authorized',
    name: 'OverviewAuth',
    components: {
      auth: AuthComponent
    },
    meta: {
      authorized: true
    }
  },

• Import the checkRequiresAuth function into the Vue router index.js file with import { checkRequiresAuth } from 'mcity-vue-auth/router/beforeEachHooks'
• If it is not already there, import the vuex store into the router. import store from '../store'
• Add the following line before the export of the router: router.beforeEach(checkRequiresAuth.bind({ $store: store }))

Vuex Setup

• Add the session Vuex module to the store.

  import session from 'mcity-vue-auth/store/session'
  
  export default new Vuex.Store({
    modules: {
      session
    },
  }

Adding Changes

Babel Transpilation

• After making code changes, rerun babel by running npm run build
• Make sure to commit these built files.