We Keep Coding

Routes from frontend shown as insecure in https website

I created a webpage using vue.js and on backend node.js.
When I access the main page ( https://example.test ) I got secure info on my browser, but once I go to other links ( https://example.test/dashboard ) I got an insecure connection.
"devServer": {
allowedHosts: ['example.test'],
host: "0.0.0.0",
port: 443,
server : {
type: "https",
options: {
key: fs.readFileSync('/usr/app/key.pem'),
cert: fs.readFileSync('/usr/app/cert.pem')
}},
hot: true
}
Is there any configuration that I'm missing in vue.config.js or I'm missing something in router/index.js?
Vue.use(VueRouter)
const routes = [
{
path: "/sign-in",
name: "signIn",
component: SignIn,
meta: {
requiresNotAuth: true
}
},
{
path: "/dashboard",
name: "dashboard",
component: Dashboard,
meta: {
requiresAuth: true
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
UPDATE
security in https://example.test:
Security in https://example.test/dashboard:

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.

Angular 6 conflict in router links on same root

i have two routes :-
1- http://localhost:4200/members/10 ===> this for member's page
2- http://localhost:4200/members/10?tab=3 ===> this for chat page
I want to make chat as a paid service so I create component I called it charge with this route ==> http://localhost:4200/charge so if any member like to go to chat route he will be redirected to charge page as I create code in ngOnInit method in chat component like that
if(!this.authService.paid)
{this.router.navigate(['charge']);}
When I go chat it redirects me to charge page and that's cool , the problem is that when I go member'page it redirects me to charge page and that's not cool at all, so please help me what can i do to solve this problem, thanks in advance
and this is my routes
export const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{
path: '',
runGuardsAndResolvers: 'always'
, canActivate: [AuthGuard],
children: [
{
path: 'members', component: MemberListComponent, resolve: {
users: MemberListResolver
}
},
{
path: 'member/edit', component: MemberEditComponent, resolve: {
user: MemberEditResolver
}, canDeactivate: [PreventUnsavedChangesGuard]
},
{
path: 'members/:id', component: MemberDetailComponent, resolve: {
user: MemberDetailResolver
}
},
{
path: 'lists', component: ListsComponent, resolve: {
users: ListResolver
}
},
{ path: 'messages', component: MessagesComponent, resolve: { messages: MessageResolver }, canActivate: [MessagesGuard] },
{ path: 'charge', component: PaymentComponent }
]
},
{ path: '**', redirectTo: '', pathMatch: 'full' }
];

It looks like you use the same ngOnInit implementation for both pages '/member' and '/chat'. And if this !this.authService.payed returns true, you will always be redirected to '/charge' page.
But to have a better understanding, please provide your routing configuration.
Edit:
Thank you for adding your routes.
{
path: 'members/:id', component: MemberDetailComponent, resolve: {
user: MemberDetailResolver
}
}
It seems like you check for !this.authService.payed in MemberDetailComponent#ngOnInit, but you probably do not check your queryParam ?tab=3.
To fix this issue quickly you can modify your if-condition:
if(!this.authService.payed && this.route.snapshot.queryParams['tab'] === 3)
where this.route has to be injected via constructor parameter
constructor(private route: ActivatedRoute)
But
I think the best solution for this issue would be to add another child route for chat page and handle authorization with another 'canActivate'.

Vue.js + MPA with own route file

When I try to access the page '/admin/dashboard' load page from src/Client/App.vue. I want to separate the admin and user with different vue, vuex, vue-router base in same the domain. Is it possible?
My project tree.
public/
-> admin/
-> index.html
-> index.hmtl
src/
-> Admin/
-> components/
-> admin.ts
-> App.vue
-> router.ts
-> Client/
-> components/
-> admin.ts
-> App.vue
-> router.ts
vue.config.js
src/Admin/router.ts
export default new Router({
mode: 'history',
base: '/admin/',
routes: [
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
},
],
});
src/Client/router.ts
export default new Router({
mode: 'history',
base: '/',
routes: [
{
path: '/',
name: 'home',
component: Home,
},
],
});
vue.config.js
module.exports = {
pages: {
'admin': {
entry: 'src/Admin/admin.ts',
template: 'public/admin/index.html',
filename: 'admin/index.html',
},
index: {
entry: 'src/Client/main.ts',
template: 'public/index.html',
filename: 'index.html',
},
}
}

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