Comments (12)
A proper place to authenticate the user is at 'layouts'. You may do:
random-layout.vue
computed: {
...mapState('auth', ['payload']),
},
methods: {
...mapActions({
authenticate: 'auth/authenticate',
logout: 'auth/logout',
}),
},
async created() {
try {
if (this.payload) await this.authenticate();
} catch (e) {
this.logout();
throw e;
}
},
from feathers-vuex.
I'm doing it in Nuxt middleware for my SPA setup:
// middleware/authenticated.js
export default function({ store }) {
store
.dispatch("auth/authenticate")
.then(result => {
console.log(result);
})
.catch(error => {
console.error(error);
});
}
// nuxt.config.js
module.exports = {
mode: "spa",
router: {
middleware: ["authenticated"]
}
}
from feathers-vuex.
I have in store actions:
import feathersVuex from 'feathers-vuex'
import feathersClient from '../services/feathers-client'
import { initAuth } from 'feathers-vuex/lib/utils'
const { service, auth } = feathersVuex(feathersClient, { idField: '_id' })
...
export const actions = {
nuxtServerInit({ commit }, { req }) {
return initAuth({
commit,
req,
moduleName: 'auth',
cookieName: 'feathers-jwt'
})
}
in feathers-client.js
import feathers from '@feathersjs/client'
import io from 'socket.io-client'
import { CookieStorage } from 'cookie-storage'
import { host, port } from '../../config/default.json'
const socket = io(`http://${host}:${port}`, { transports: ['websocket'] })
const feathersClient = feathers()
.configure(feathers.socketio(socket))
.configure(feathers.authentication({ storage: new CookieStorage() }))
export default feathersClient
and then in mounted() of page
...
async mounted() {
await this.authenticate()
this.findUsers()
},
...
If you run this.authenticate() without params then it try to load token from cookie... and it works for me, but I suppose that there must be a better place to call this function, not all pages separately. BTW findUsers is a mapped find action from service using ...mapActions('users', { findUsers: 'find' }),
in component (page here) methods.
from feathers-vuex.
I've done it using middleware, as shown in the previous comment, but I've also seen it dispatched after the initAuth
utility:
nuxtServerInit({ commit }, { req }) {
return initAuth({
commit,
req,
moduleName: 'auth',
cookieName: 'feathers-jwt'
})
.then(() => {
// dispatch here
})
}
from feathers-vuex.
Unless I'm missing something, dispatching from initAuth inside of nuxtServerInit doesn't authenticate the front-end client. Any authenticated endpoints that don't get called on the server fail.
I arrived at the same conclusion as @DaviTeodoro, but it seemed unnatural and the lack of documentation calling out what I think should be a common issue led me to believe that I must be missing something.
from feathers-vuex.
nuxtClientInit
is a good solution for this. I just made an initauth store action that i dispatch in both nuxtServerInit
and nuxtClientInit
Otherwise persisting the state like in #93 is the way to go. I'm not sure that works with all of nuxt's modes though
from feathers-vuex.
Could you elaborate on this? For me authentication is currently not working at all. Log-in works, the jwt token and payload are stored in the state (as seen with vue debugger for chrome), but I only get NotAuthenticated: No auth token
upon requesting protected resources...
from feathers-vuex.
@DaviTeodoro i try yours example but if do things this way then authentication itself is working, but findUsers (find action mapped from store) on my page is reporting 'No auth token'... I think is called before auth done.
from feathers-vuex.
I'll close this after this gets added to the docs.
from feathers-vuex.
Currently, I have successfully run auth in middleware in SPA mode, like @samburgers , with auth function in store/index.js. However, after changing it into universal mode, it's not working... Then I have to use @DaviTeodoro 's solution.
But I want to do it in middleware even in universal mode.
from feathers-vuex.
@NickBolles thank you for your PR, which I've just merged. I'd really appreciate if you could update the guide, here: https://github.com/feathers-plus/docs/blob/master/source/v1/feathers-vuex/guide.md.
Once done, I will close all issues around auth and Nuxt. Thank you so much for your contributions!
from feathers-vuex.
I'm closing this now that we have a full Nuxt example in the docs. Thanks!
from feathers-vuex.
Related Issues (20)
- ReplaceItems option doesn't works when patching/updating value with null HOT 2
- Potential Issue with Params.Paginate set to true HOT 1
- FeathersVuexGet component doesn't work with params HOT 1
- add one time sponsor HOT 2
- makeFindMixin uses the same object instance for data HOT 2
- $like operator not working in local getters(using sequelize) HOT 2
- $sort when field data is NULL HOT 4
- Performance issue Find with more than 500 records HOT 18
- Recommended way to use feathers-graph-populate with feathers-vuex auth system
- Auth plugin fails to generate the getters when userService contains a path-like name, e.g 'v1/users'
- [FR] Export BaseModel at the module level
- Keycloak / feathers server and client library HOT 4
- TypeError: Cannot read properties of undefined (reading 'set')
- FeathersVuexPagination does not work with vue 3
- Simple date filter from store not working
- auth user is not updated reactively
- Supporting Vue 2.7 HOT 1
- JWT Malformed error
- Do not clean clone after save inside feathersVuexFormWrapper
- Endless server query loop
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from feathers-vuex.