title: Vue-router: redirect to route if user does not have permissions
body: <p>I have a <code>vue</code> project and <code>laravel</code> as a <code>back-end</code>, i have to check if an user has permissions to access a resource or a view, in the backend i use <a href="https://github.com/spatie/laravel-permission" rel="noreferrer">laravel permissions</a> to accomplish this, and it work fine, the problem i have now is in the front end.</p>
  
  <p>I fetch the users permissions when it login and save it on the <code>localStorage</code>, now how can i prevent a user for enter a certain route if the user does not have the permissions for it?</p>
  
  <p>for example i have these routes</p>
  
  <pre><code>    {
        path: 'users',
        name: 'Users',
        component: Users,
        meta : {
          permissions: 'read_users'
        }
      },
      {
        path: 'roles-permissions',
        name: 'RolesPermissions',
        component: RolesPermissions,
        meta : {
          permissions: 'read_roles'
        }
      },
      {
        path: 'roles-permissions/create',
        name: 'CreateRolesPermissions',
        component: CreateRolesPermissions,
        meta : {
          permissions: 'create_roles'
        }
      },
      {
        path: 'roles-permissions/:id/edit',
        name: 'EditRolesPermissions',
        component: EditRolesPermissions,
        meta : {
          permissions: 'edit_roles'
        }
      },
      {
        path: 'customers',
        name: 'Clientes',
        component: CustomersList
      }
  </code></pre>
  
  <p>if the user does not have a permission in <code>['read_roles','create_roles','edit_roles','read_users']</code> she should be redirected to <code>customers</code>.</p>
  
  <p>var permissions = localStorage.getItem('permissions');
    var can         = to.meta.permissions ? (permissions.includes(to.meta.permissions) || to.meta.permissions == '*') : true;</p>
  
  <p>how can this be done?</p>