Невозможно установить аутентификацию vuex для пера js backend в postgres - PullRequest
Новая
       65

Невозможно установить аутентификацию vuex для пера js backend в postgres

0 голосов
/ 03 октября 2019

У меня есть служба stats , которая извлекает данные из postgres, работающей на localhost:3030/stats, я также настроил другую службу, которую я хочу использовать в качестве службы аутентификации на localhost:3030\users, у меня есть установочные перья. js backend и все работает, я также добавил аутентификацию для этих сервисов, поэтому при попытке получить прямой доступ к ним появляется сообщение 401 Forbidden. Ниже показан перо Backend app.js 

const path = require('path');
const io = require('socket.io-client');
const favicon = require('serve-favicon');
const compress = require('compression');
const helmet = require('helmet');
const cors = require('cors');
const logger = require('./logger');

const feathers = require('@feathersjs/feathers');
const configuration = require('@feathersjs/configuration');
const express = require('@feathersjs/express');
const socketio = require('@feathersjs/socketio');


const middleware = require('./middleware');
const services = require('./services');
const appHooks = require('./app.hooks');
const channels = require('./channels');

const authentication = require('./authentication');

const sequelize = require('./sequelize');
const socket = io('http://api.feathersjs.com');
const app = express(feathers());
// Load app configuration
app.configure(configuration());
// Enable security, CORS, compression, favicon and body parsing
app.use(helmet());
app.use(cors());
app.use(compress());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(favicon(path.join(app.get('public'), 'favicon.ico')));
// Host the public folder
app.use('/', express.static(app.get('public')));

// Set up Plugins and providers
app.configure(express.rest());
// app.configure(socketio());
app.configure(socketio(socket, {timeout: 10000}));

app.configure(sequelize);

// Configure other middleware (see `middleware/index.js`)
app.configure(middleware);
app.configure(authentication);
// Set up our services (see `services/index.js`)
app.configure(services);
// Set up event channels (see channels.js)
app.configure(channels);

// Configure a middleware for 404s and the error handler
app.use(express.notFound());
app.use(express.errorHandler({ logger }));

app.hooks(appHooks);

module.exports = app;

У меня есть настроенный интерфейс Vuex, где я использую эти сервисы для создания панели мониторинга, теперь я хочу добавить страницу входа в систему до доступа к панели мониторинга. Я пытался следовать этому учебнику

Взгляните на

Login.vue 

<template>
<v-app>
  <v-container fluid>
    <v-slide-y-transition mode="out-in">
      <v-layout column align-center>
        <v-form
          v-model="valid"
          @submit.prevent="login({ valid, user })"
          @keydown.prevent.enter>
          <v-text-field
            v-model="user.email"
            :rules="notEmptyRules"
            label="Username"
            required
          ></v-text-field>
          <v-text-field
            v-model="user.password"
            :rules="notEmptyRules"
            label="Password"
            type="password"
            required
          ></v-text-field>
          <v-btn type="submit" :disabled="!valid">Login</v-btn>
        </v-form>
      </v-layout>
    </v-slide-y-transition>
  </v-container>
</v-app>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { notEmptyRules } from '@/validators';

export default {
  name: 'login',
  data: () => ({
    valid: false,
    user: {
      email: '',
      password: '',
    },
    notEmptyRules,
  }),
  computed: {
  },
  methods: {
    ...mapActions('localAuth', ['login']),
  },
};
</script>

App.vue 

<template>
    <v-app>
      <v-layout>
      <app-navbar :user="user" :logout="handleLogout">
      </app-navbar>
      </v-layout>
      <router-view></router-view>
    </v-app> 
    </template>

    <script>
    import { mapActions, mapState } from 'vuex';
    import AppNavbar from '@/components/AppNavbar';
    import store from './store';

    export default {
      name: 'App',
      components: {
        AppNavbar,
      },
      data() {
        return {
          fixed: false,
        };
      },
      computed: {
        user () {
          return this.$store.state.auth.user
        }
      },
      methods: {
        ...mapActions('auth', [ 'logout' ]),
         handleLogout () {
          this.logout()
            .then(_ => {
              this.$router.push('/')
            })}
      },
    };
    </script>

store.js 

import Vue from 'vue';
import Vuex from 'vuex';
import feathersVuex from 'feathers-vuex';
import feathersClient from './feathers-client';

const { service, auth, FeathersVuex } = feathersVuex(feathersClient, { idField: '_id' });

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

export default new Vuex.Store({
  plugins: [
    service('realtime_stats', {
      instanceDefaults: {
        statid: '',
        oldcount: '',
        inserted: '',
        updated: '',
        deleted:'',
        newcount:'',
        createdAt:'',
        updatedAt:'',
      }}),
    service('joblog', {
      instanceDefaults: {
        jobid: '',
        jobname: '',
        jobstatus: '',
        createdAt: '',
        updatedAt:'',
      }}),
    service('monthly_stats',{
      instanceDefaults:{
        statid:'',
        stats:'',
        createdAt:'',
        updatedAt:''
      }
    }),
    service('daily_count',{
      instanceDefaults:{
        txcount:'',
        pdxcount:'',
        dates:'',
        createdAt:'',
        updatedAt:''
      }
    }),
    auth({ userService: 'users' }),
  ],
});

main.js 

import Vue from 'vue';
import App from './App.vue';
import router from './router';
// import store from './store/index';
import store from './store';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

router.beforeEach((to, from, next) => {
  const currentUser = store.state.auth.user;
  const requiresAuth =to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next('/');
  } else {
    next();
  }
});

// store.dispatch('auth/authenticate').then(res=>{
//   console.log(res);
new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app');
// });

// // Auth first before loading the app
// store.dispatch('auth/authenticate')
//   .catch(() => {})
//   // Render the app
//   .then(() => {
//     // eslint-disable-next-line no-new
//     new Vue({
//       router,
//       store,
//       render: h => h(App)
//     }).$mount('#app');
//   });

router.js 

import Vue from 'vue';
import Router from 'vue-router';
import Login from './views/Login.vue';
import stats from './views/stats.vue';
import Signup from './views/SignUp.vue';
import store from './store';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
    {
      path:'/signup',
      name:'signup',
      component : Signup,
    },
    {
      path: '/stats',
      name: 'stats',
      component: stats,
    },
    {
      path: '*',
      redirect: '/login'
    }
  ],

});
router.beforeEach((to, from, next) => {
  store.dispatch('fetchAccessToken');
  if (to.fullPath === '/users') {
    if (!store.state.accessToken) {
      next('/login');
    }
  }
  if (to.fullPath === '/login') {
    if (store.state.accessToken) {
      next('/users');
    }
  }
  next();
});
export default router;

, но когда я запускаю это, я получаю следующую ошибку

Error

Iпопробовал, но не смог заставить это работать, пожалуйста, дайте мне знать, как я могу заставить это работать.

...