2

I have a little problem.

I'm making a project using feathers and vuex on Vue 2.

In this project there is a dashboard where all my personnal projects / experiences / and messages in.

when i login and redirect to the dashboard, all the data is retrieved but when i refresh the page i got a Feathers error that say i'm not authenticated

the error: feathers error Image

here's my store/index.js :

import Vue from 'vue'
import Vuex from 'vuex'
import { FeathersVuex } from '../feathers-client'
import auth from './store.auth'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)
Vue.use(FeathersVuex)

const requireModule = require.context(
  // The path where the service modules live
  './services',
  // Whether to look in subfolders
  false,
  // Only include .js files (prevents duplicate imports`)
  /\.js$/
)
const servicePlugins = requireModule
  .keys()
  .map(modulePath => requireModule(modulePath).default)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  plugins: [...servicePlugins, createPersistedState({storage: window.localStorage}), auth]
})

Here's the Vue package.json file:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@feathersjs/authentication-client": "^4.5.11",
    "@feathersjs/feathers": "^4.5.11",
    "@feathersjs/socketio-client": "^4.5.11",
    "@vue/composition-api": "^1.1.3",
    "core-js": "^3.6.5",
    "feathers-hooks-common": "^5.0.6",
    "socket.io-client": "^2.4.0",
    "feathers-vuex": "^3.16.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vue-spinner": "^1.0.4",
    "vuex": "^3.4.0",
    "vuex-persistedstate": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

And my login function:

methods: {
        ...mapActions('auth', ['authenticate']),
        login() {
            var email = this.$refs.emailInput.value
            var password = this.$refs.passInput.value

            this.authenticate({strategy: 'local', email, password})
            .then(() => this.$router.push({name: 'Dashboard'}))
            .catch((err) => {
                let type = err.className
                err = Object.assign({}, err)
                err.message = 
                    type === 'not-authenticated'
                        ? 'Incorrect email or password'
                        : 'An error prevented login'
                console.error(err.message)
            })
        }
    }
p2sias
  • 21
  • 2

1 Answers1

0

There are a very awsome project which can save your time: it allow you using feathers and vuex effortless.

See the project at: https://vuex.feathersjs.com/

Dahkenangnon
  • 66
  • 1
  • 9