섹션 1: 사용자 역할 및 관리 - Quasar

유성체 전단

내가 선택한 것은 Quasar Framework 기존의 부품이 풍부하기 때문이다.과거에 나는 이미 몇 개의 원형 프로젝트에서 그것을 사용한 적이 있는데, 이것은 신속한 개발을 허용하는데, 이것은 원형 디자인에 특히 유용하다.이 초보자에 대해 저는 앞부분에 신경을 많이 쓰지 않았습니다. 앞부분은 최종적으로 고객의 브랜드와 수요에 따라 고도로 맞춤형으로 만들어지기 때문에 저는 기능에만 신경을 씁니다.그래서 나는 필요하지 않은 프레임워크 코드를 보존했다. 현재 상태에서 이 코드들은 이 초보자에게 아무런 가치가 없다.

개시하다

나는 Vue, Vuex, VueRouter와 유성체에 대해 기본적으로 알고 있다고 가정할 것이다.Quasar 프레임워크를 설정하는 방법은 자세히 설명하지 않지만, 이 프로젝트의 맞춤형 설정을 소개할 것입니다.Vue.js나 Vuex 초보라면 Quasar's Getting Started Guide를 시작하기 전에 Vue로 한두 가지 프로젝트를 해보는 것을 권장합니다.

Note: I would advise against copying/pasting any code snippets and instead go directly to the repository to view the code. Due to the amount of code involved, I've omitted lines of code in this article for brevity. It's not written as a tutorial, so please view the repository if you want to create a similar project.

추가 라이브러리

Quasar 외에도 여러 가지 라이브러리를 사용하여 다른 기능을 수행했습니다.

FeathersJS Client Libraries

Axios

Feathers-Vuex

Vuelidate

풍경.

이 초보자 프로그램의 백엔드 기능은 몇 가지 보기만 있으면 가능합니다.

레지스터

로그인

비밀번호 재설정

이메일 확인

계좌

비밀번호를 잊으셨습니다

관리 대시보드

주택

어떤 보기가 필요한지 확인하면, 보기마다 pages 만들고 routes 에 추가합니다.대부분의 페이지는 데이터 입력을 허용하는 표로 구성되어 있다.UI에는 복잡성이 거의 없으며 대부분 양식이기 때문에 자세히 설명하지는 않지만 질문이 있으면 알려 주십시오!

확인

나는 vuelidate 라이브러리를 사용하여 표 검증을 진행한다.유성체에 추가하기 위해서 boot file를 사용했습니다.
다음은 Login에서 e-메일을 보는 예입니다.

<q-input 
   outlined
   v-model="$v.formData.email.$model"
   label-color="accent"
   label="Email"
   type="email"
   lazy-rules
   dense
   class="q-ma-sm"
   :error="$v.formData.email.$invalid && 
   $v.formData.email.$dirty"
            >
      <template v-slot:prepend>
          <q-icon color="accent" name="fas fa-envelope" size="xs" />
      </template>
      <template v-slot:error>
          <div v-if="!$v.formData.email.required">
              This field is required.
          </div>
          <div v-if="!$v.formData.email.email">
              Please provide a valid email address
          </div>
      </template>
</q-input>

import { required, minLength, email } from "vuelidate/lib/validators";

export default {
  data() {
    return {
      formData: {
        email: ""
      }
    };
  },
  validations: {
    formData: {
      email: {
        required,
        email
      }
    }
  },
}

Vuelidate는 최소한의 사용자 정의 코드를 사용하여 폼 값을 검사하는 것이 매우 쉬워졌는데, 나는 이 점을 매우 좋아한다. (나는 게으른 개발자이다.)

FeathersJS 클라이언트

FeatherJS 프레임워크는 인증과 서비스 호출을 처리하는 데 사용할 수 있는 몇 가지 client libraries 를 제공합니다.나는 그것을 합병했다. 이렇게 하면 스스로 신분 검증을 실현할 필요가 없다.
feathers 클라이언트 라이브러리를 사용하기 위해 feathersClient.js 안내 파일을 추가했습니다. 이 파일은 제 axios 설정 설정을 axios.js에 저장합니다.axios 설정은 요청을 보낼 때 로드맵을 표시할 수 있습니다.
또한 FeatherClient 부트 파일setup Feathers-Vuex을 사용합니다.

// Setting up feathers-vuex
const {
  makeServicePlugin,
  makeAuthPlugin,
  BaseModel,
  models,
  FeathersVuex
} = feathersVuex(feathersClient, {
  serverAlias: "api", // optional for working with multiple APIs (this is the default value)
  idField: "_id", // Must match the id field in your database table/collection
  whitelist: ["$regex", "$options"]
});

export { makeAuthPlugin, makeServicePlugin, BaseModel, models, FeathersVuex };

이것은 다음과 같은 vuex 조작을 통해 제공될 것이다basic authentication handling: auth/authenticate와 auth/logout.

도로 경찰

또한 액세스 기반 보기를 처리하기 위해 auth.js 안내 파일을 만들었습니다. 사용자의 권한 수여 사용자 상태에 따라 필요에 따라 사용자에게 방향을 바꿉니다.

router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth) {
      // if requires admin
      if (store.state.auth.user) {
        if (to.meta.requiresAdmin) {
          if (
            store.state.auth.user.permissions &&
            store.state.auth.user.permissions.includes("admin")
          ) {
            next();
          } else {
            Notify.create({
              message: `Your account is not authorized to see this view. If this is in error, please contact support.`,
              color: "negative"
            });
            next("/account");
          }
        } else if (
          to.path === "/" ||
          to.path === "/login" ||
          to.path === "/register"
        ) {
          next("/account");
        } else if (!LocalStorage.getItem("feathers-jwt") && to.path !== "/") {
          next("/login");
        } else {
          next();
        }
      } else {
        if (to.path !== "/login") {
          next("/login");
        } else {
          next();
        }
      }
    } else {
      next();
    }

사용자 상태를 관리하는 데 필요한 관리 루트를 지정하기 위해 메타데이터를 추가했습니다.

{
    path: "/admin",
    component: () => import("layouts/MainLayout.vue"),
    children: [
      {
        path: "",
        name: "AdminHome",
        component: () => import("pages/admin/Index.vue"),
        meta: { requiresAuth: true, requiresAdmin: true }
      }
    ]
  },

관리자가 라우팅에 액세스해야 하는 경우 라우팅에 액세스할 수 있는 권한이 있는지 확인합니다.

항행

기본 레이아웃MainLayout이 다중 탐색 링크를 포함하도록 업데이트되었습니다.로그인한 사용자의 경우 계정, 관리자(관리자인 경우) 및 로그아웃을 탐색할 수 있습니다.권한이 없는 사용자는 로그인 및 등록 링크를 사용할 수 있습니다.

응용 프로그램.vue

App.vue 입구점은 Vue 3 Composition APIboot file를 이용하여Quasar에 추가)를 통해 사용자가 응용 프로그램이 처음 불러올 때 JWT 영패를 저장했는지 확인한다.또한 사용자 권한 수여 상태의 변화를 검사하고 사용자가 로그인/로그아웃할 때 사용자로 방향을 바꿉니다.

서비스

나는 요청을 돕는 사용자 서비스를 만들었다.feathers 클라이언트에 대해feathers의 특정한 서비스에 folder를 추가했습니다. 이것은 이미지 서버 쪽의feathers 서비스를 추가합니다.클라이언트 서비스를 구성하여 어느 서버측 서비스와 통신해야 하는지를 파악하는 것 외에 맞춤형 서비스를 추가하지 않았습니다.

const servicePath = "users";
const servicePlugin = makeServicePlugin({
  Model: User,
  service: feathersClient.service(servicePath),
  servicePath
});

이것은 Feathers-Vuex Service Plugin의 것이다.이 서비스는 사용자의 서비스 수요에 따라 맞춤형으로 만들어야 하는데, 초보자는 그렇지 않습니다.
Feather Client 또는 Axios의 요청을 수행하기 위해 서비스 층을 제공하는 응용 프로그램 사용자 서비스에 대해 저는 user service 서비스 호출을 admin와 account 서비스 호출로 나누어 모듈화를 실현할 것입니다.
간단하게 보기 위해서, 나는 axios를 사용하여 본 초보자가 필요로 하는 소량의 미경험증 호출 (사용자 만들기 등) 을 진행했지만, 생산 중feathers 클라이언트는 모든 호출에 사용해야 할 수도 있다.
서비스 콜은 다음과 같습니다.

export async function updateUser(user, id) {
  return feathersClient.service("users").patch(id, user);
}

또는

export async function updateIdentity(password, currentEmail, updatedEmail) {
  return axiosInstance.post("/authManagement", {
    action: "identityChange",
    value: {
      password: password,
      changes: { email: updatedEmail },
      user: {
        email: currentEmail
      }
    }
  });
}

Edit: After working with Feathers-Vuex more, I realized how powerful it actually is and would re-do the service layer in this example to completely use feathers-vuex rather than have a separate user service to handle some other service requests. Definitely a case of read the documentation before using it!

FeatherJS 백엔드는 feathers-authentication-management 및 feathers-permissions를 사용합니다.이 서비스 파일들은 FeatherJS 백엔드에 보내는 필수 부하를 보여줌으로써feathers 인증 관리 라이브러리를 전면에서 실현할 수 있도록 합니다. 이것은 다음 글에서 더욱 깊이 있는 토론을 진행할 것입니다.

국가 관리

vuex 앱스토어는 Feathers vuex를 사용하여 앱스토어와 Feathers 클라이언트 요청을 동기화합니다.인증의 경우 클라이언트 인증 서비스를 사용자 서비스로 구성하기 위해 루트 디렉토리에 store.auth.js 파일이 있습니다.

import { makeAuthPlugin } from "../boot/feathersClient";
export default makeAuthPlugin({ userService: "users" });

인덱스에서 authvuex로 가져옵니다.
Feathers Vuex는 스토어index에서 다음과 같이 설정합니다.

import { FeathersVuex } from "../boot/feathersClient";
import authvuex from "./store.auth";

const servicePlugins = requireModule
  .keys()
  .map(modulePath => requireModule(modulePath).default);

Vue.use(FeathersVuex);

export default function(/* { ssrContext } */) {
  const Store = new Vuex.Store({
    plugins: [...servicePlugins, authvuex],
    modules: {
      account,
      admin
    },
    strict: process.env.DEV
  });

  return Store;
}

이 상점은 관리와 계정 모듈로 명명되어 사용자 서비스의 분리를 반영한다.action.js 파일은 필요한 모든 서비스 호출을 하고 호출 결과를 처리합니다.기본 상태를 정의하고 서비스 호출의 결과를 처리하기 위한 변체를 정의합니다.

내가 뭘 놓쳤나?

Feathers JS 백엔드를 사용하기 위해 Quasar 전단을 구축하는 관건적인 업데이트를 포함한다고 생각합니다.만약 내가 무엇을 빠뜨렸다면 나에게 알려주세요.문제, 건의 등의 평론을 남겨 주십시오. 저는 이에 상응하여 본문을 갱신할 것입니다!