If you need to access the root Vue instance that the router was injected into, you can use router.app. From there, you can access the store normally using router.app.$store.

const router = new Router({
    routes,
})

router.beforeEach((to, from, next) => {
    // Access the store through `router.app.$store` here.
    if (router.app.$store.getters('user')) next();
    else next({ name: 'login' });
})

For more information, refer to the API Reference.

Vue 3

In Vue 3, the router.app feature has been removed. However, you can still add it when using the router by following the steps outlined in the migration guide:

app.use(router)
router.app = app

I decided to relocate the store from main.js to store/index.js and then imported it into the router.js file:

import store from './store'

//routes

const routes = [
    { path: '/home', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true }
]    

//guard clause
Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresLogin) && store.state.user.authenticated == false) {
        store.commit("setGlobalError", "You need to log in before you can perform this action.")
        next("/Login")
    } else {
        next()
    }
})

Following @Saurabh's suggestion, importing the store does work. However, in my opinion, it introduces a workaround smell into your code.

It functions because the Vuex store is a singleton. When imported, it creates a tightly linked dependency between your component, the routers, and the store. This can make unit testing more challenging at the very least. The decoupling of vue-router serves a purpose, and it might be beneficial to adhere to its suggested pattern by keeping the router separate from the actual store instance.

Upon examining the vue-router source, it becomes clear that there is a more graceful way to access the store from the router, such as in the beforeRouteEnter guard:

beforeRouteEnter: (to, from, next) => {
  next(vm => {
    // access any getter/action here via vm.$store
    // avoid importing the store singleton and creating hard dependencies
  })
}

Edit on September 10, 2020 (thanks @Andi for mentioning)

Utilizing the beforeRouteEnter guard is then dependent on the specific case. Some options I see immediately include:

1. Implementing the guard in a mixin and using it selectively in components that require it, rather than filtering necessary components in a global guard
2. Implementing the guard in a global mixin (be cautious of declaration specifics, e.g., needing to declare it after Vue.use(VueRouter);: here and here)

Separating your location state from the rest of your application state may complicate things more than necessary. Having encountered similar issues with Redux and Vuex, I opted to handle my location state within my Vuex store by utilizing a dedicated router module. You might find this approach beneficial to consider.

In your specific scenario, you can monitor location changes directly within the Vuex store and trigger the appropriate "redirect" action, like so:

dispatch("router/push", {path: "/login"})

Managing location state as a Vuex module is simpler than it seems. Feel free to use mine as a reference if you wish to experiment with it:

https://github.com/geekytime/vuex-router

Upon investigating, I discovered that the store was inaccessible to me in router.js when utilizing the guard router.beforeEach. However, after switching the guard to router.beforeResolve, the store became accessible.

Furthermore, I found that by waiting for the store import in the guard router.beforeEach, I was then able to effectively use router.beforeEach. An example of this is provided below the router.beforeResolve code.

To align with the scenario presented in the original question, here is how it worked for me. My setup includes vue-router 3.0.2 and vuex 3.1.0.

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store';  //or specify a full path like ./store 

Vue.use(VueRouter)

//define routes
const routes = [
    { path: '/home', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true }
]

const router = new VueRouter({
   routes  //ES6
 })

router.beforeResolve((to, from, next) => {
    const user = store.state.user.user;  //store with namespaced modules
    if (to.matched.some(record => record.meta.requiresLogin) && user.isLoggedIn) {
       next() //proceed to the route
    } else next("/login")  //redirect to login

})

export default router;

In addition, I realized that I could make router.beforeEach function by awaiting the loading of the store within the beforeEach guard.

router.beforeEach(async (to, from, next) => {
  const store = await import('@/store');  //await the store 
  const user = store.state.user.user;  //store with namespaced modules
  if (to.matched.some(record => record.meta.requiresLogin) && user.isLoggedIn) {
  ....  //and continue as above
});

To utilize main.js effectively, you have the option to:

router.$store = store

Afterwards, in index.js within the router section:

await router.$store.dispatch("efgh")

My approach would be as follows:

In the App.vue file, I will set up a watcher for a cookie that holds authentication details. Once a user is authenticated, I will store a token containing the necessary authentication info in this cookie.

If the cookie becomes empty, indicating that the user is no longer logged in, I will automatically redirect the user to the /login page. Additionally, logging out will delete the cookie. In case the user tries to go back after logging out, they will be redirected to the login page because the required cookie (indicating the user is logged in) does not exist.