SSR (server side) issues

[litvinenkow]

If you SPA has server side rendering.

1. localStorage in the plugin is undefined so error 500 for the first time opening application.
2. Some nested <router-view> don't work properly and produces errors like The client-side rendered virtual DOM tree is not matching server-rendered content.
3. Usage of this.$auth on the page provide 500 errors at once.
4. No way of accessing /account/ like pages (auth needed) directly only through client-side routing.
5. Server thinks that user not logged in so redirect from protected pages occers permanently autorized you or not.

[websanova]

Yes, I have not tested server side rendering at all yet. Although it is on my to do list.

[appinteractive]

Any progress on that issue?

[websanova]

No, would need to setup some basic ssr demo first. Your welcome to contribute a demo folder :-)

…

On Jun 1, 2017 21:50, "Grzegorz Leoniec" ***@***.***> wrote: Any progress on that issue? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#120 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABkcyxk1_vFs1px-avR636Oc_A6VP4Vcks5r_s_JgaJpZM4MfMQt> .

[crisbal]

I have been experimenting with this a little bit.
Right now I have been able to make the plugin work with SSR without having to touch the code for the plugin.

First of all I install the plugin only for the client (so only in the entry-client.js file) and for the server I provide a simple stub, placing inside entry-server.js:

Vue.prototype.$auth = null; // this is to avoid undefined variables when SSRendering and referencing $auth

Then I defined a custom Vue component, which I called AuthCheck.vue and mounted it in my App.vue (the main Vue component that get's mounted both by the client and by the server.

The component looks like this:

export default {
  name: "AuthCheck",
  beforeMount() { // before mounting the component start refreshing the token and call ` handleRedirect()` 
    this.$auth.refresh({
      success: () => {
        this.handleRedirect()
      },
      error: () => {
        this.handleRedirect() 
        this.$auth.logout() // not sure about this, I just want to unset the token
      }
    })
  },
  methods: {
    handleRedirect() { // this method will check if the current route has metadata, check for login, and redirect if not logged in. It is a simple proof of concept, it still needs better checks
      this.$auth.options.checkAuthenticated.call(this.$auth, () => {
        if (Object.keys(this.$route.meta).length !== 0) {
          if (this.$auth.check()) {
            console.log("You are authorized")
          } else {
            console.log("You are not authorized")
            this.$router.replace(this.$auth.options.authRedirect.path) // send to login
          }
        } else {
          console.log("No need to check auth") // no meta specified
        }
      });
    }
  },
  render(h) {
    // this will render nothing         
    return h(null)
  }
}

Finally I can reference and use $auth in my templates like so (I am using pug, but the same applies to HTML):

NoSSR  // this prevent the content from rendering on the server side (https://github.com/egoist/vue-no-ssr)
  .SessionInfo
    AuthCheck // the custom component defined above
    div(v-if="$auth")
      a(v-if="!$auth.check()") Not logged in
      a(v-if="$auth.check()") You are logged in
      button(@click=`$auth.login({
        data: {
          username: 'admin',
          password: 'secret'
        }
      })`) Login

So far this seems to work, except a problem I have been experiencing, and maybe @websanova could help me with this. When I call this.$auth.refresh() and the token is expired I always get redirected to /login, instead of just calling the error() callback. Is there any way I can avoid this?

[websanova]

Yes, I suppose it's sending back a 401?

This is just handled by the driver and doing a logout for you:

https://github.com/websanova/vue-auth/blob/master/drivers/http/vue-resource.1.x.js#L21

You should be able to override this or just set it to null.

[websanova]

btw, if you can push up a standalone ssr demo that would be awesome :-)

[crisbal]

Hey @websanova, I have pushed a demo here: https://github.com/crisbal/vue-webpack-ssr-fully-featured/tree/vue-auth-demo

To run it, simply

git clone
git checkout vue-auth-demo
npm install (might take a while)
npm run dev

The interesting parts are the one outlined in my comment above (and in the last commit of the project).

Let me know what you think. If you need it I can also provide a smaller and more lightweight demo project (this one is a fork of a big and complete vue template I am developing)

[websanova]

Hey Cristian, Looks great! Actually I've seen a lot of these little ssr starter kit/demo and this is really the cleanest one I've seen. I just jumped around through the code and it looks really clean and organized. I'll likely just pop this in directly as a small demo for ssr/vuex (unless you're really up for creating a super barebones one). Anyway, I'll be trying this out shortly after I'm done some client work today. But I noticed no typescript, or is that still coming? Thx, Rob :-)

…

On Mon, Jul 24, 2017 at 7:44 PM, Cristian Baldi ***@***.***> wrote: Hey @websanova <https://github.com/websanova>, I have pushed a demo here: https://github.com/crisbal/vue-webpack-ssr-fully- featured/tree/vue-auth-demo To run it, simply npm install (might take a while) npm run dev The interesting parts are the one outlined in my comment above (and in the last commit of the project). Let me know what you think. If you need it I can also provide a smaller and more lightweight demo project (this one is a fork of a big and complete vue template I am developing) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#120 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABkcy5ez1GzbLAzNK06AV7EyhF7YdacTks5sRIOWgaJpZM4MfMQt> .

[crisbal]

Hey, you are correct, there is no typescript, I have used it a bit in the past few days and it is just too much work for not so many benefits for these kind of projects.

I will clean up the branch a little bit, removing the really useless/out-of-scope stuff (we don't need i18n or extensive docs or linting for the sake of a demo) . I will keep you updated.

[crisbal]

Hey Rob, I did some cleaning and pushed a new version, much more lightweight.

Same instructions as above.

https://github.com/crisbal/vue-webpack-ssr-fully-featured/tree/vue-auth-demo

Feel free to include it in your repo as a demo or link to it in the Readme.

[websanova]

ssr demo added, thx @crisbal