We Keep Coding

"TypeError: next is not a function" in the router.js file of my vue 3 project when trying to apply navigation guards?

I don't understand why i doesn't recognise the next function whereas i followed a similar video implementing this and it worked with no errors
I don't understand why i doesn't recognise the next function whereas i followed a similar video implementing this and it worked with no errors
I don't understand why i doesn't recognise the next function whereas i followed a similar video implementing this and it worked with no errors
import Dashboard from "./Pages/Dashboard.vue";
import Customers from "./Pages/Customers.vue";
import EditProfile from "./Pages/EditProfile.vue";
import Insurance from "./Pages/Insurance.vue";
import Activations from "./Pages/Activations.vue";
import Login from "./Pages/Login.vue"
import ForgotPassword from "./Pages/ForgotPassword.vue"
import MyDashboard from "./Pages_cus/MyDashboard.vue";
import MyActivations from "./Pages_cus/MyActivations.vue";
import MyEditProfile from './Pages_cus/MyEditProfile.vue';
import NotFound from './Pages/NotFound.vue';
import NetworkError from './Pages/NetworkError.vue'
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
name: "MyDashboard",
component: MyDashboard,
path: "/my-dashboard",
meta: {
requiresAuth: true,
}
},
{
name: "MyActivations",
component: MyActivations,
path: "/my-activations",
},
{
name: "MyEditProfile",
component: MyEditProfile,
path: "/my-edit-profile",
},
{
name: "Dashboard",
component: Dashboard,
path: "/dashboard",
meta: {
requiresAuth: true,
}
},
{
name: "Customers",
component: Customers,
path: "/customers",
},
{
name: "EditProfile",
component: EditProfile,
path: "/edit-profile",
},
{
name: "Insurance",
component: Insurance,
path: "/insurance",
},
{
name: "Activations",
component: Activations,
path: "/activations",
},
{
name: "Login",
component: Login,
path: "/",
meta: {
requiresAuth: true,
}
},
{
name: "ForgotPassword",
component: ForgotPassword,
path: "/forgot-password",
},
{
name: "404Resource",
component: NotFound,
path: '/404/:resource',
props:true
},
{
name: "NetworkError",
component: NetworkError,
path: '/network-error'
},
{
name: "NotFound",
component: NotFound,
path: '/:catchAll(.*)'
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, next)=>{
if (to.matched.some(record => record.meta.requiresAuth)) {
if (localStorage.getItem('token') == null) {
console.log('Hello JS')
next({
path: '/',
params: { nextUrl: to.fullPath }
}) // I get the error at this level it doesn't recognise next as a function
}
else{
next();
}
}
else {
next()
}
})
export default router;
[Screenshot of code in VS code][1]
[Screenshot of code in browser
<!-- begin snippet: js hide: false console: true babel: false -->
import Dashboard from "./Pages/Dashboard.vue";
import Customers from "./Pages/Customers.vue";
import EditProfile from "./Pages/EditProfile.vue";
import Insurance from "./Pages/Insurance.vue";
import Activations from "./Pages/Activations.vue";
import Login from "./Pages/Login.vue"
import ForgotPassword from "./Pages/ForgotPassword.vue"
import MyDashboard from "./Pages_cus/MyDashboard.vue";
import MyActivations from "./Pages_cus/MyActivations.vue";
import MyEditProfile from './Pages_cus/MyEditProfile.vue';
import NotFound from './Pages/NotFound.vue';
import NetworkError from './Pages/NetworkError.vue'
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
name: "MyDashboard",
component: MyDashboard,
path: "/my-dashboard",
meta: {
requiresAuth: true,
}
},
{
name: "MyActivations",
component: MyActivations,
path: "/my-activations",
},
{
name: "MyEditProfile",
component: MyEditProfile,
path: "/my-edit-profile",
},
{
name: "Dashboard",
component: Dashboard,
path: "/dashboard",
meta: {
requiresAuth: true,
}
},
{
name: "Customers",
component: Customers,
path: "/customers",
},
{
name: "EditProfile",
component: EditProfile,
path: "/edit-profile",
},
{
name: "Insurance",
component: Insurance,
path: "/insurance",
},
{
name: "Activations",
component: Activations,
path: "/activations",
},
{
name: "Login",
component: Login,
path: "/",
meta: {
requiresAuth: true,
}
},
{
name: "ForgotPassword",
component: ForgotPassword,
path: "/forgot-password",
},
{
name: "404Resource",
component: NotFound,
path: '/404/:resource',
props:true
},
{
name: "NetworkError",
component: NetworkError,
path: '/network-error'
},
{
name: "NotFound",
component: NotFound,
path: '/:catchAll(.*)'
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, next)=>{
if (to.matched.some(record => record.meta.requiresAuth)) {
if (localStorage.getItem('token') == null) {
console.log('Hello JS')
next({
path: '/',
params: { nextUrl: to.fullPath }
}) // I get the error at this level it doesn't recognise next as a function
}
else{
next();
}
}
else {
next()
}
})
export default router;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
[1]: https://i.stack.imgur.com/Y9D08.png
[2]: https://i.stack.imgur.com/n9ERj.png

next is the third argument for the beforeEach function, so it should be:
beforeEach((to, from, next)) => {...
While you're using the next function correctly here (ensuring that it's called exactly once), it is currently deprecated: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0037-router-return-guards.md#motivation
It's now suggested to use 1 or 2 arguments and return a boolean value to indicate whether or not to proceed, or a route to redirect to:
router.beforeEach((to)=>{
if (to.matched.some(record => record.meta.requiresAuth)
&& localStorage.getItem('token') == null) {
//redirect
return {
name: '/',
query: { nextUrl: to.fullPath }
}
}
return true; //proceed (equivalent of next())
});

Unable to access any route besides "/" in a Vue app hosted on Azure, with the message, "The requested content does not exist"

I have an application built with Vue, hosted on Azure, but when I build it I can't access any routes besides "/", for some reason. All it shows me is a message saying: "The requested content does not exist," when I try to access other routes
I've tried switching the view router mode between history and hash, but that doesn't seem to make a difference. Any suggestions are welcome.
Here's my code
// index.js
import Router from 'vue-router'
import routes from './routes'
Vue.use(Router)
export default new Router({
mode: 'history',
routes
})
// routes.js
import LoginMain from '#/components/login/LoginMain'
import Conveniados from '#/components/conveniados/Conveniados'
import Logout from '#/components/login/Logout'
import Categorias from '#/components/categorias/Categorias'
import Historico from '#/components/historico/Historico'
import Ofertas from '#/components/ofertas/Ofertas'
import Usuarios from '#/components/usuarios/Usuarios'
import Clubes from '#/components/clube/Clubes'
import Voucher from '#/components/voucher/Voucher'
import Pedidos from '#/components/pedidos/Pedidos'
import Produtos from '#/components/produtos/Produtos'
import ConveniadoOfertas from '#/components/conveniados-ofertas/ConvOfertas'
import Delivery from '#/components/delivery/Delivery'
import i18n from '../i18n'
export default [
{
path: '/',
component: LoginMain
},
{
path: '/logout',
component: Logout
},
{
path: '/conveniados',
component: Conveniados,
name: 'conveniados',
alias: `${i18n.t('associate')}`,
nivel: 2
},
{
path: '/conveniado/:uuidConveniado/ofertas',
component: ConveniadoOfertas,
name: 'conveniadosOfertas',
alias: 'ConveniadoOfertas'
},
{
path: '/ofertas',
component: Ofertas,
name: 'ofertas',
alias: `${i18n.t('offers')}`,
nivel: 2
},
{
path: '/produtos',
component: Produtos,
name: 'produtos',
alias: `${i18n.t('products')}`,
nivel: 2
},
{
path: '/pedidos',
component: Pedidos,
name: 'pedidos',
alias: `${i18n.t('orders')}`,
nivel: 2,
notify: true
},
{
path: '/categorias',
component: Categorias,
name: 'categorias',
alias: `${i18n.t('categories')}`,
nivel: 1
},
{
path: '/historico',
component: Historico,
name: 'historico',
alias: `${i18n.t('historic')}`,
nivel: 2
},
{
path: '/usuarios',
component: Usuarios,
name: 'usuarios',
alias: `${i18n.t('users')}`,
nivel: 1
},
{
path: '/clubes',
component: Clubes,
name: 'clubes',
alias: 'Clubes',
nivel: 1
},
{
path: '/voucher',
component: Voucher,
name: 'voucher',
alias: 'Voucher',
nivel: 1
},
{
path: '/delivery',
component: Delivery,
name: 'delivery',
alias: `${i18n.t('delivery')}`,
nivel: 1
},
{
path: '*',
redirect: '/'
}
]

Accessing cookies in Vue 3 router Typescript

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'login',
component: () => import('../components/LoginComponent.vue'),
},
{
path: '/register',
name: 'register',
component: () => import('../components/RegisterComponent.vue'),
},
];
this.$cookies.get('name')
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
object is possibly undefined for this
. I have also tried using this?.$cookies but then it says Property $cookies doesn't exist on type never
What other ways are there to access cookies in the Vue router?

Vue3 "export 'createWebHistory, createRouter' was not found in 'vue-router'

I'm creating a Vue3 application and after I added the router, my first page is loading but it's completely blank.
I'm receiving the following
Errors: Uncaught TypeError: Object(...) is not a function
In console:
Warning in ./src/router/index.js "export 'createRouter' was not found
in 'vue-router'
Warning in ./src/router/index.js "export 'createWebHistory' was not
found in 'vue-router'
router -> index.js
import { createWebHistory, createRouter } from "vue-router";
...
const routes = [{
path: "/user/create",
name: "createUser",
component: createUser,
},
{
path: "/users",
name: "listUser",
component: listUser,
meta: { requiresAuth: true }
},
{
path: "/user/show/:id",
name: "showUser",
component: showUser,
meta: { requiresAuth: true }
},
{
path: "/user/update/:id",
name: "updateUser",
component: updateUser,
},
{
path: "/login",
name: "login",
component: Login
},
{
path: "/register",
name: "register",
component: Register
},
{
path: "/users/bearer",
name: "bearer",
component: bearer,
meta: { requiresAuth: true }
}
]
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
const isAuthenticated = firebase.auth().currentUser;
console.log("isauthenticated", isAuthenticated);
if (requiresAuth && !isAuthenticated) {
next("/login");
} else {
next();
}
});
export default router;

Found the answer to this here:
Stackoverflow question
You need to install the router via npm
npm install vue-router#next --save

Angular2 - Router does not pick up route/home path

I have and Angular2 app using this Angular2 Webpack Starter. I just added a fallback route to my app.routes.ts file after adding its module (NotFoundModule) to app.module.ts and everything works great except now my home path('') does not register anymore and the NotFoundComponent loads. The code is below:
import { Routes } from '#angular/router';
import { HomeComponent } from './home';
import { NotFoundComponent } from './notfound/notfound.component';
import { DataResolver } from './app.resolver';
export const ROUTES: Routes = [
{
path: '', component: HomeComponent },
{
path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
},
{
path: 'open-account', loadChildren: './open-account/#OpenAccountModule'
},
...
...
...
{
path: '**', component: NotFoundComponent
},
];
How can I fix this problem so my Home route will work properly again and the NotFoundComponent won't load in its place?

When you have routes that use '' for their path and don't have children, you'll want to specify pathMatch: 'full' for that route.
export const ROUTES: Routes = [
{
path: '', pathMatch: 'full', component: HomeComponent },
{
path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
},
{
path: 'open-account', loadChildren: './open-account/#OpenAccountModule'
},
...
...
...
{
path: '**', component: NotFoundComponent
},
];
See https://angular.io/docs/js/latest/api/router/index/Routes-type-alias.html#!#matching-strategy for the reasoning.