We Keep Coding

Vue webpack devServer proxy prepending fetch url with vue-router params

I have vue3 project using a webpack devServer proxy and keep getting a 404 when running a fetch to an api due to the url being prepended with an incorrect value. This only occurs on pages that are using vue-router params.
example page url is -
http://localhost:8081/edit/206
correct fetch url should be -
http://localhost:8000/api/enquiries/getenquiry/206
actual fetch url -
http://localhost:8000/edit/api/enquiries/getenquiry/206
fetch command -
let response = await fetch(`api/enquiries/getenquiry/${id}`, {
method: 'GET',
})
vue-router -
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NewEnquiries from '../views/enquiries/NewEnquiries.vue'
import EditEnquiry from '../views/enquiries/EditEnquiry.vue'
import MailboxesView from '../views/system/mailboxes/MailboxesView.vue'
const routes = [
{ path: '/', name: 'home', component: HomeView },
{ path: '/new', name: 'new', component: NewEnquiries },
{ path: '/edit/:id', name: 'editenquiry', component: EditEnquiry },
{ path: '/mailboxes', name: 'mailboxes', component: MailboxesView }
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
vue.config.js -
const { defineConfig } = require('#vue/cli-service')
const AgentKeepAlive = require('agentkeepalive');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
logLevel: 'debug',
agent: new AgentKeepAlive({
maxSockets: 100,
keepAlive: true,
maxFreeSockets: 10,
keepAliveMsecs: 100000,
timeout: 6000000,
freeSocketTimeout: 9000000 // free socket keepalive for 9000 seconds
}),
onProxyRes: (proxyRes) => {
const key = 'www-authenticate';
proxyRes.headers[key] = proxyRes.headers[key] && proxyRes.headers[key].split(',');
}
}
}
}
})
What works -
adding the following pathRewrite to remove the prepended "edit" acts a workaround but obviously not a good solution going forward. Where am i going wrong here?
pathRewrite: { '^/edit': '' }

Vue JS Router Guard

I am learning Vue JS and so far so good. I have an API which I am using for my backend and on successful login, it is giving me access and a refresh token. In Vue, I am checking localStorage for the token and if null I need to redirect to the login page. If present I need to make an API call to check if valid and redirect to log in or the intended route depending on the response. So far the code below is what I have managed to put up but is saying Detected an infinite redirection in a navigation guard when going from "/" to "/". Aborting to avoid a Stack Overflow. This will break in production if not fixed
Here is may code
router.beforeEach((to, from, next ) =>{
console.log(to.meta)
let tokens = JSON.parse(localStorage.getItem('chikolo_tokens'))
if (tokens!== null && to.meta.requiresAuth) {
next()
}
else{
next({ name: 'login' })
}
})
Routes
{
path: '/',
name: 'login',
component: Login,
meta: { requiresAuth: false },
},
{
path: '/admin/home/',
name: 'home',
component: AdminHome,
meta: { requiresAuth: true },
},
{
path: '/admin/users/',
name: 'adminUsers',
component: Users,
meta: { requiresAuth: true },
},
How do I navigate to the login page if tokens is null?

tokens!== null && to.meta.requiresAuth is always false for / route.
A redirect should happen only for routes that require auth:
if (to.meta.requiresAuth && !tokens) {
next({ name: 'login' })
} else{
next()
}

Kindly try this
const routes = [
/** admin*/
{
path: '/admin/home',
name:'adminHome',
component: homeAdminIndex,
meta:{
requiresAuth :true
}
},
/** pages*/
{
path: '/',
name:'Home',
component: homePageIndex,
meta:{
requiresAuth :false
}
},
router.beforeEach((to,from) =>{
if (to.meta.requiresAuth && !localStorage.getItem('token')){
return { name: 'Login'}
}
if (to.meta.requiresAuth == false && localStorage.getItem('token')){
return { name: 'adminHome'}
}
})

Vue Router production issues

I have a project on Vue.js, and there is some issue with production mode and vue router. On development version I have no issues, but if I compile it and run on production mode, and go to some link - it show me 404 error code
Here is my route js file:
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '*',
name: 'Agents',
component: Agents
},
{
path: '/agents',
name: 'Agents',
component: Agents
},
{
path: '/compare-agents',
name: 'Compare',
component: Compare
},
{
path: '/input',
name: 'InputFields',
component: InputFields
},
{
path: '/check-pay',
name: 'CheckPay',
component: CheckPay
},
{
path: '/success',
name: 'Success',
component: Success
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
For example, I wanna go to Agents page, by link like http::/localhost:8080/agents and it's works (dev verison), but if I compile, it's getting 404 error
Website is localted in core directory.
I can visit homepage, use nginx server, and here it's conf file:
worker_processes 4;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
index index.html
include /etc/nginx/mime.types;
location / {
try_files $uri $uri/ /index.html;
}
}
}

Redirect to Angular internal route from external Application

I am building my authentication system as a different front end application than my dashboard application. The front end auth app is hosted in lets say http://auth.example.net and front end of dashboard app is hosted in http://dashboard.example.net.
Router structure of my dashboard :
{
path: "dashboard",
component: LandingPageComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
},
{
path: "home",
component: HomeComponent,
canActivate: [RouteGuard],
data: {
externalUrl: authFrontEnd
}
},
{
path: 'Contact',
component: ContactComponent,
canActivate: [RouteGuard],
data: {
externalUrl: authFrontEnd
}
},
{
path: 'about',
component: AboutComponent,
canActivate: [RouteGuard],
data: {
externalUrl: authFrontEnd
}
}
],
},
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: ":user/:token", component: AuthenticationComponent },
In my auth application, When I am authenticated, I should be redirected to the Dashboard application's url with userId and token embedded in the url (I know its not a secure way to do):http://dashboard.example.net/user_2/token_ec23
In my Auth app:
loginAuthentication(user) {
const result = this.apiService.login(user);
result.subscribe(res=> {
if(res.status === 'success') {
window.location.href=`http://dashboard.example.net/${res.result.user_id}/${res.result.token}`
}
})
}
From what I understand is, this isn't working because the angular routes are only understood inside the angular application. Redirection to angular internal routes can't be happening from external source. How to achieve this thing ? The requirement for me is to pass the token and user Id from auth application to dashboard application and this is the only way I know for now.

Vue.js routes serving from subdirectory

I would like to serve my Vue.js app from a subdirectory on a staging server. For example: http://url.com/subdir/app/
Right now if I do this and set up the build config assetsPublicPath to serve from that folder, all the assets are served fine but my app does not get routed correctly. The "home" page gets routed to the 'catch-all', and any further routes simply show the normal white-page 404.
Here is my router:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: ContentView,
children: [
{
path: '/',
name: 'DataTable',
component: DataTable,
meta: { requiresAuth: true }
},
// ===================================
// Login
// ===================================
{
path: '/login',
name: 'AppLogin',
component: AppLogin,
meta: { checkAlreadyLoggedIn: true }
},
{
path: '/logout',
name: 'AppLogout',
component: AppLogout,
meta: { requiresAuth: true }
}
]
},
{
path: '*',
component: ContentView,
children: [
{
path: '/',
name: 'NotFound',
component: NotFound
}
]
}
]})
And here is the necessary config/index.js changes: assetsPublicPath: '/subdir/app/'
In local development the routes work fine. But on the staging server all static assets, the built JS and CSS etc all serve fine. However the home route shows the catch-all. I am assuming it's because my routes are not set up correctly, or because I need to do something to serve from a subdirectory in production.

The assetsPublicPath config is just for webpack assets. For vue-router, you need to set the base option in the constructor.
See docs: https://router.vuejs.org/en/api/options.html#base

I have been able to solve this, using the base property of vue-route.
In the case of the example it would look like this:
export default new Router({
mode: 'history',
base: '/subdir/app/',
routes: [
{
path: '/',
component: ContentView,
children: [
My question now is how can I make this subdirectory dynamically.
Imagine a single server, and 2 different urls pointing to this server.
www.dominio / app1
www.dominio / app2