OKIMMO-REDIRECT

What is it ?

okimmo-redirect is is Vue component that can be used to redirect in your beautiful app. Using query parameters, you can define a configuration to specify what route to use and what action to do with parameters.

Usage

import Vue from 'vue'
import Router from 'vue-router'

const config = require('./configRedirect')
import redirectBuilder from '../services/okimmo-redirect'
const OkimmoRedirect = redirectBuilder(config)

Vue.use(Router)

const router = new Router({
  routes: [{
      ...
    },
    // REDIRECTION HANDLER
    {
      path: '/redirect',
      name: 'redirect',
      component: OkimmoRedirect
    }

Config definition

Config given to the component is an Array that contains definitions of redirections.

Example

const config = [
  {
    resource: 'home',
    routeName: 'myHomePageDefinedInTheRouter'
  }
]

URL: /redirect?resource=home

In this example, this okimmo-redirect will find the resource variable in query parameters and then, redirect to the route 'myHomePageDefinedInTheRouter' that is the name that must be defined in your router definition.

Give some parameters

What if you need to give some parameters to your route (myBeautifulRoute/:param1/:param2) ?

This is simple, you can add a property to the config object:

const config = [
  {
    resource: 'home',
    routeName: 'myHomePageDefinedInTheRouter'
  },
  {
    resource: 'example',
    routeName: 'myBeautifulRoute',
    needParams: [
      'param1', // will search for "param1" in query parameters and add it to the route params for redirection
      ['parameterWithBadName', 'param2'] // will search for "parameterWithBadName" in query parameters and put its value to the route params with "param2" as name for redirection
    ]
  }
]

URL: /redirect?resource=example&param1=value1&parameterWithBadName=value2

Multiple definition for one resource

There is some case that we need multiple actions for one resource. For example, a book resource can have: "create, edit, vue and list" actions.

const config = [
  {
    resource: 'book',
    actions: [
        {
            name: 'edit',
            routeName: 'book-edit',
            needParam: [
                ['id', 'bookId']
            ]
        },
        {
            name: 'list',
            routeName: 'books'
        },
        {
            name: 'create',
            routeName: 'book-create'
        },
        {
            name: 'vue',
            routeName: 'book-vue',
            ['id', 'bookId']
        }
    ]
  },
  ...
]