Howto check if a user is logged in with Vuejs?

VueJS
1

I have a metoer, Vue app where I use Blaze accounts

Howto check if a user is logged in og not?

If logget ind then show main template
If not logged in then show welcome template with signup and login form

2

Use vue-meteor-tracker to inject reactive Meteor datasources in Vue:

meteor:{
  user(){
    return Meteor.user()
  }
}
3

Do you have a link or code for a complete example so I know that I will make do correct?

4

You can use it in the template just like a computed property:

<div v-if="user">
  Logged in
  <pre>{{user}}</pre>
</div>
<div v-else>Not logged in</div>
5

My problem is that I have two templates:

template: Welcome (login page)

template: AppLayout

AppLayout i load like this in main.js:

const router = routerFactory.create();
      new Vue({
        data : {
          language: "da"
        },
        router,
        render: h => h(AppLayout),
      }).$mount('app');
    });

If I use

if (!Meteor.loggingIn() && !Meteor.userId()) {

const router = routerFactory.create();
      new Vue({
        data : {
          language: "da"
        },
        router,
        render: h => h(Welcome),
      }).$mount('app');
    });

}
else
{
const router = routerFactory.create();
      new Vue({
        data : {
          language: "da"
        },
        router,
        render: h => h(AppLayout),
      }).$mount('app');
    });
}

then it works, but not reactive (have to push F5 to reload page)

Howto get it to work reactive? I have diffucult to se how it works with vue-meteor-tracker

6

You shouldn’t create a whole new Vue app based on wether the user is logged in or not. Take a look at how Akryums example app is built maybe.

7

Can not find a meteor,vue example where the user have a login page. Do you have a link?

8 

router. beforeEach((to, from, next) => {
  // Check user
  if (!Meteor.loggingIn() && !Meteor.userId()) {
      next({path: '/Welcome'});
  } else {
      // Check role
          
              next();
         
  }

then it says router is not defined, what code do I miss? and will it work?

9

@thorus Take a look at this example, I think what you need is like a Route Interceptor to check for authentication …

I’ve implemented this logic in a boilerplate of mine and it’s running fine

…and on your route you import it and execute the logic inside the beforeRoute

I hope I can help you with what you need.

10

I’m almost there :slight_smile:

Now I just need to find out howto hide Applayout when on login page and howto redirect away from login page when logged in, I use the standard blazejs login box

from main.js

    // App start
    Meteor.startup(() => {
      // Start the router
       
      import AppLayout from '/imports/ui/AppLayout.vue';

      const router = routerFactory.create();

      new Vue({
        data : {
          language: "da"
        },
        router,
        render: h => h(AppLayout),
      }).$mount('app');
    });
11

I use this with a blaze app, but howto make something with vue?


Router.onBeforeAction(function () {
  // all properties available in the route function
  // are also available here such as this.params

  if (!Meteor.userId()) {
    // if the user is not logged in, render the Login template
    this.render('welcome');
    
  } else {
    // otherwise don't hold up the rest of hooks or our route/action function
    // from running
    this.next();
  }
});

Router.configure({
  layoutTemplate: function(){
    return Meteor.userId() ? 'mainLayout' : 'empty';
  }
});