I want to access nuxt-i18n $t() for multi lang texts in vuex state but we do not have access this in vuex store
Related
For example: if we have user data (username, fullname) and we use it in our components where should we store this: vuex or localstorage?
Vuex store is used to maintain the current state of your application, whereas local storage is used as a persistent state.
I would only want to save usernames and full names of my users while they are using the application as those are personal details and shouldn't be accessible while not being logged in. Especially for public computers this would be a privacy concern.
I am currently building an app using the following
Next.js
Express API
Redux-Toolkit & RTK Query
I have all of the authentication logic implemented, but have ran into an issue.
So, upon successful login, the express api returns 2 httponly cookies containing the access/refresh tokens.
I have an endpoint in my api to get the current user using the access token i.e /api/auth/me
This all works fine, but what I can't figure out is the best way to fetch the user on each page load and store them in the redux state.
Do I use RTK Query to hit the /api/auth/me endpoint and just call the query whenever I need it throughout the app?
Ideally I fetch and set the user in _app.tsx, but I cannot use redux dispatch since it's outside of the <Provider store={store}></Provider>
Also for example if I wanted to use the redux stored user in getServerSideProps I can't seem to do that either because it's not client side and doesn't have access to redux.
I just can't seem to find a good way to simply set the authenticated user and be able to use them globally throughout the app whether it's inside redux store or in something like getServerSideProps.
Any advice would be truly amazing, I am totally lost.
One way of persisting authentication state is storing the token in the local storage. And in the main App component you can check whether the token is present in the redux store. If it's not there you can set it manually in useEffect function.
As such:
useEffect(() => {
fetchAuthTokenFromLocalStorage().then((token) => {
dispatch(setAuthenticationResult(token));
});},[dispatch]);
I'm relative new to Vue.js. Our application needs to restrict / secure access to specific pages based on user role(s) and consequently also display just the respective item in the menu.
I would like to understand what's the recommended approach to store the user role information and retrieve where necessary to take these decisions.
I searched around and landed in pages about Vuex Store, maybe storing in the Session Storage, or even libraries like CASL, but if any, I got even more confused.
I would appreciate any feedback from experienced Vue developers.
I would recommend you to store user data in the dedicated Vuex module state (say's "account") and create getters to get computed values, one of which will be, say's isAuthenticated. The most common way to check if a user is authenticated is just to get the state value (because the default value should be null).
state: {
account: null
},
actions: { // Here we will fill the account state },
getters: {
isAuthenticated (state) {
return Boolean(state.account);
}
}
P.S. - In special cases, user data could be stored in LocalStorage, SessionStorage, Cookies, etc., in which case you can still get access to this data through Vuex still. But basically, we only store tokens in these stores.
I am trying to check the authentication status of a user when he opens my react-native application. I have used redux-persist to get my react store to persist on the device after my application has closed. My question is do I need to do this if I am going to use firebase authentication ? What are the 'rules' with regard to using firebase and redux-persist together ? How to make sure they work together properly ?
See the whole point of redux-persist is to store the redux state even when the app is closed via either AsyncStorage/sql-lite-storage.
I believe previously you used to store your JWT token and check if its valid and show the user the respective screens.
Now since FirebaseAuth doesnt have any such flow, you can omit the loginReducer in redux persist configuration.
Like this :
const persistConfig = {
key: 'root',
storage: storage,
blacklist: ['navigation'] // navigation will not be persisted
};
But there may be some other places you use the redux store , like suppose i use redux persist to store the trip data of user, so it doesnt fetches every time. So just check out whats your purpose.
Hope it helps. feel free for doubts.
I’m building an app with Adonis.js for the API and Vue.js for the front-end. I’m using JWT token to secure all routes of my API.
I understand the power of JWT to secure routes of API. When user create an account, a token is created to identified the user.
When I call my API from Vue I write the token of the active user in the header, and in my API I verify if the token is « active » and if is attributed on a user account ( and after that a make call to my databases..).
But the problem is (for me) I don’t understand how I can make a middleware to my vue route (verify if a user is authentify). I’have read some tutorial about that, and the conclusion is => store the token in local storage (ok, it’s logical) and make a middleware just checking if token exist.
But in my opinions this option is very not secure, because I can « enter » in my routes if I create a token manually in the local storage..
I’m very confusing about this concept.. can you open my eyes ehe ?
Thanks
So yeah, you were right that you should be using Vuex to store the value for the token to retrieve it using getters in your components/middleware. Your state would look something like this:
export const state = () => ({
api_token: localStorage.getItem("api_token")
});
And getters would look something like this:
export const getters = {
apiToken(state) {
return state.api_token;
}
}
To protect routes in the front-end you would be using router guard functions (https://router.vuejs.org/guide/advanced/navigation-guards.html). To give you an idea, this is what a simple check would look like:
router.beforeEach((to, from, next) => {
if (!store.getters["auth/apiToken"]) next('/login');
else next();
})
Good luck!