Vue3 - url with image forbid

I am creating my first website with Vue3. The authentication works. For this I use AWS Amplify/Cognito and as store I use Pinia.

As mentioned login and routing works.

For example I enter localhost:3000 and I am automatically redirected to localhost:3000/login. After login I can click on the appropriate pages. After login I can also go to another existing page in the address bar. Now all pages need an authentication which is done by login.

Now if someone has a link to an image which is displayed on a page, he will see this image even without authentication. Example: localhost:3000/src/assets/member/pic001.jpg

How can I stop this? I assumed that all unknown routes are intercepted during routing.

Only if you route guard them. Navigation Guards | Vue Router

Thank you for the answer!

I have called the console in parallel to see where I can start to monitor the Navigation Guard accordingly.

If I call the page normally (example: localhost:3000) I see at the Guard that the target is /login. If I directly enter the URL http://localhost:3000/src/assets/images/member/Member1.jpeg in the browser address bar, I see nothing in the Console. As if the Guard does not check at all.

Perhaps I have also overlooked in the Navigation Guard link. I assumed that if I set this wildcard at the path to the end, that no matter what was entered in the browser address bar, that this direct link is then redirected to the NotFound component I created.

Please provide code related to your issue. Without it, it’s hard for us to help. You can refer to our guide on asking for help for more information. Thanks!

Yes, that is understandable. Enclosed now my code:

router/index.js

const routes = [{
path: “/”,
redirect: “/home”,
},
{
path: “/login”,
name: “login”,
component: Login,
},
{
path: “/home”,
name: “home”,
component: Home,
meta: {
requiresAuth: true,
},
{
path: “/member”,
name: “member”,
component: Member,
meta: {
requiresAuth: true,
},
{
path: “/:catchAll(.*)”,
name: “NotFoundPage”,
component: NotFoundPage,
meta: {
requiresAuth: false,
},
];

const router = createRouter({
history: createWebHistory(
import.meta.env.BASE_URL),
routes,
});

router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some((x) = x.meta.requiresAuth);
const user = useUserStore();
if (requiresAuth) {
if (user.isSignedIn) {
next();
} else {
next({ name: “login” });
}
} else {
if (user.isSignedIn && to.name === “login”) {
next("/home");
} else {
next();
}
}
window.scrollTo(0, 0);
});

This is my routing.

So the Member.vue is only displayed after authentication (true). In the Member View I then included the images of the individual team members as follows.

src="…/assets/images/member/member1.jpeg"

Thus, the image is taken from the assets folder.

If the user now calls up the website and logs in successfully, he can go to the member page and see the image.With a right click on the image, the user can now read the image URL and give it to someone else. This foreign user can then access the image directly without having to authenticate himself.In the console I was able to understand that when I call up the page - https://mySite.com - the routing is run through. However, when I use the image URL - https://mysite.com/assets/image/member/member1.jpeg" - it seems that the routing doesn’t work.

You’re mixing up client routing and server routing. Client routing only takes place after Vue loads and takes over routing within the Vue app. Server routing occurs during the very first request to your domain. The request to your assets directory is a server request.

If you must have your assets protected via auth, then you’ll need to set that up on your server. You’ll also need to setup some mechanism to be able to request the assets by passing some form of auth token within your Vue app because you won’t be able to just request them as you would normally.

Thanks for your tips! That helps me further.