Routing and Security

ServiceStack VS Vue
1

After looking at the documentation and trying to do my own research.
I’m a little confused as to how the vuetify + nuxt template handles routing and security.

ie. I can add the authenticate annotation to the service, however if I enter the URL manually, the page is still directed properly but with no data coming from the service.

How can you restrict access to unauthorized users ?

Brian S.

2

You can find examples of strategies of protecting pages in latest .NET Core SPA templates where for a normal Vue App using vue-router you can use the beforeEnter route hook in your route definitions, e.g:

function requiresAuth(to: Route, from: Route, next: (to?: string) => void) {
  if (!store.userSession) {
    next(`${Routes.SignIn}?redirect=${encodeURIComponent(to.path)}`);
    return;
  }
  next();
}
function requiresRole(role: string) {
  return (to: Route, from: Route, next: (to?: string) => void) => {
    if (!store.userSession) {
      next(`${Routes.SignIn}?redirect=${encodeURIComponent(to.path)}`);
    }
    else if (!store.userSession.roles || store.userSession.roles.indexOf(role) < 0) {
      next(`${Routes.Forbidden}?role=${encodeURIComponent(role)}`);
    }
    else {
      next();
    }
  };
}

const routes = [
  { path: Routes.Profile, component: Profile, beforeEnter: requiresAuth },
  { path: Routes.Admin, component: Admin, beforeEnter: requiresRole('Admin') },
  { path: Routes.Forbidden, component: Forbidden },
];

This isn’t available in Vue Nuxt.js Apps which use their own implicit page routing so the vue-nuxt SPA project template uses the Vue components mounted() hook to ensure they have authorization, e.g:

import { requiresAuth } from '../shared';

export default {
    computed: {
        ...mapGetters(["userSession"])
    },
    mounted () {
        this.requiresAuth();
    },
    methods: {
        requiresAuth,
    }
}

/shared/index.js

export function requiresAuth() {
    if (state.userSession == null) {
        this.$router.push(`${Routes.SignIn}?redirect=${encodeURIComponent(this.$route.path)}`);
        return false;
    }
    return true;
}