I have a problem with nuxt auth module while loging out:
In my templates I used directly user.avatar lets say for images on 10 places.
Now when I use this.$auth.logout() it does the job but before redirecting with middleware or by using this.$router.replace('/') I get a lot of errors that avatar is undefined.
One way is to check for each is avatar undefined or not. But it takes a lot of changing.
Is there a way to redirect just after changing state?
Related
I am developing a simple app to showcase CRUD operations with Appwrite and Nuxt 3 (Release Candidate 11). The source code to the same can be found here.
I am using the landing page of the app (index.vue) for simple redirection i.e. if the account exits in the accountStore, I want to redirect the user to /workouts route, else ask them to login by redirection to the /login route.
The problem I am facing is when I am landing on the index.vue page (with no user session in progress in Appwrite), I am still getting redirected to /workouts route, instead of the /login route. I presume the reason for the same is the following error that is being logged in the console.
I need help in figuring out from where is the error message originating and how to possibly remedy it.
Here is my public github repo: https://github.com/EshaanAgg/workout-buddy
Maybe this is a bug with Nuxt 3 or Vite since Nuxt 3 is currently only a release candidate.
Also, in my opinion, Server Side Rendering (SSR) always complicates things so much. It doesn't look like you're using SSR, so you could possibly update your nuxt.config.ts to disable SSR:
{
// ... other stuff
ssr: false
}
I just deployed my Vue app to my website using GitHub Pages.
The website is successfully hosted at https://astroorbis.com.
Here's the problem; When you click the "links" button at the top of the page, it successfully nagivates you to https://astroorbis.com/links, but when you try visiting the URL itself (typing in https://astroorbis.com/links) into your browser, it returns a 404.
There are other links that have the same error, such as /discord, /github, etc.
I tried the solution at Vue Router, GitHub Pages, and Custom Domain Not Working With Routed Links, but it failed as well.
What would be the solution for this?
As stated in this section of the HTML5 mode
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access https://example.com/user/id directly in their browser. Now that's ugly.
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!
So, the solution would be to use something like that
const routes = [
// will match everything and put it under `$route.params.pathMatch`
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]
On Netlify, you also need to add the following for it to work
/public/_redirects
/* /index.html 200
So I'm not sure about Github Pages but you should have something similar there, some way of catching all routes and sending them to the index.html of your initial SPA page load.
Otherwise maybe just give a try to Netlify with the _redirects configuration.
Maybe this article could help regarding Github pages.
The hack in your given link seems to be the only viable solution but it's still bad for SEO so yeah, depends if you want any (I guess so).
In that case, you could try Nuxt.js, Gridsome or Vitesse if you want to have some statically generated pages (best approach regarding SEO).
I have a question regarding the logout route. When you look at the Demo Page when the user is logged out, a 404 error is shown in the console, because the CMSPageGuard tries to fetch the non-existing Logout page from the Backend. This is a minor problem but doesn't seem intentional?
More so since the logic in the Logout guard redirects to either 'home' or 'login' in case the logout path doesn't exist.
Is the only workaround to not get the 404 error to add a logout page in the Backend, even though it is never shown?
In short, this is intentional. It is part of a feature that makes it easy for storefronts that do require the optional logout page to add it in the CMS and it will be picked up out of the box by the Spartacus logout logic.
You are right about what happens under the hood. If you look at the description of the LogoutGuard in the doc, the overall logic its described like so:
Takes care of routing the user to a logout page (if available) or redirects to the homepage. If the homepage is protected, the user is redirected to the login route instead.
To verify if a logout page is available, the LogoutGuard makes a request for it. If a logout page is not available, that request returns a 404 and this is what shows up in the browser dev tools.
As for preventing that these errors show in the log, there is for now no configuration that will turn this feature off. You might explore using a custom LogoutGuard and override the canActivate function, but I'm not 100% sure this is possible.
Attempting to learn and domain Laravel I developed a website with it 5.6 version and vuejs 2.
In it's admin section I want to implement an authorization system. I tryed with Passport API and axios but I can't achived it. So I undid all I was made and now, I'm trying to implement the Laravel Authorization but I can't access to /login and /register routes. When you go to those urls the page automactically redirects you to home page. I deleted cache and cookies, and the issue persists. I reviewed the auth controllers and services and they are identically to the factory version.
I removed the vue routes to avoid conflicts.
It doesn't matter what path is written in LoginController.php it always redirects to home page. So the problem is not there... any way, I'm lost
Please check php artisan route:list to make sure you have the desired routes defined.
Environment: Nuxt.js (Vue/Vuex/Node framework with SSR).
If user encounters an Internal Server Error, I want to use a custom Vue template, similar to the one I'm already using for 404 errors.
By looking at Nuxt source, it looks like the only way is to add a custom 500 page is to override the default .nuxt/views/error.html with my own custom error page.
I don't want just a static HTML page that the user must click out of to re-enter the app, though. I want it to still load the Nuxt app with some preloaded '500 error' state.
In Nuxt docs I don't see how to accomplish this. Any advice?
Things I have tried already:
Redirecting from error.html (doesn't work because of double redirect)
Iframe (works, but don't want to do it this way)