권한 관리 모듈을 로드하는 방법(자세한 튜토리얼)

이 문서에서는 권한 관리 모듈에서 VUE 구성 요소를 동적으로 로드하는 방법을 자세히 설명합니다. 이와 관련하여 필요한 친구는 따라하고 배울 수 있습니다.

이 기사에서는 주로 로그인 및 구성 요소의 동적 로딩에 대해 설명합니다.

로그인 상태 저장

사용자가 성공적으로 로그인한 후 나중에 사용할 수 있도록 현재 사용자의 로그인 정보를 로컬에 저장해야 합니다. 구체적인 구현은 다음과 같습니다.

로그인 성공 및 데이터 저장

로그인 작업이 성공적으로 수행된 후 커밋 작업을 통해 데이터가 스토어에 제출됩니다. 핵심 코드는 다음과 같습니다.

this.postRequest('/login', {
  username: this.loginForm.username,
  password: this.loginForm.password
}).then(resp=> {
  if (resp && resp.status == 200) {
  var data = resp.data;
  _this.$store.commit('login', data.msg);
  var path = _this.$route.query.redirect;
  _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
  }
});

store

스토어의 핵심 코드는 다음과 같습니다.

export default new Vuex.Store({
 state: {
  user: {
   name: window.localStorage.getItem('user' || '[]') == null ? '未登录' : JSON.parse(window.localStorage.getItem('user' || '[]')).name,
   userface: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userface
  }
 },
 mutations: {
  login(state, user){
   state.user = user;
   window.localStorage.setItem('user', JSON.stringify(user));
  },
  logout(state){
   window.localStorage.removeItem('user');
  }
 }
});

문제를 줄이기 위해 사용자가 성공적으로 로그인한 후의 데이터는 localStorage에 저장됩니다(사용자가 F5를 눌러 새로고침한 후 데이터 손실을 방지하기 위해). 문자열 형식으로 저장되었다가 검색 시 json으로 변환됩니다. 사용자가 로그아웃하면 localStorage의 데이터를 지웁니다.

구성 요소의 동적 로딩

권한 관리 모듈에서는 이것이 프런트엔드의 핵심으로 간주됩니다.

핵심 아이디어

사용자가 성공적으로 로그인한 후 홈 페이지에 들어가기 전에 서버에 요청을 보내 현재 메뉴 정보와 구성 요소 정보를 가져옵니다. 서버는 현재 사용자의 역할과 역할을 결정합니다.

[
  {
    "id": 2,
    "path": "/home",
    "component": "Home",
    "name": "员工资料",
    "iconCls": "fa fa-user-circle-o",
    "children": [
      {
        "id": null,
        "path": "/emp/basic",
        "component": "EmpBasic",
        "name": "基本资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/emp/adv",
        "component": "EmpAdv",
        "name": "高级资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  }
]

이 문자열을 가져온 후 프런트 엔드는 두 가지 작업을 수행합니다. 1. 현재 경로에 json을 동적으로 추가합니다. 2. 데이터를 저장소에 저장합니다. 그런 다음 각 페이지는 매장의 데이터를 기반으로 메뉴를 렌더링합니다.

핵심 아이디어는 어렵지 않습니다. 구현 단계를 살펴보겠습니다.

데이터 요청 타이밍

이것은 매우 중요합니다.

이게 왜 이렇게 어려운지 물어보는 친구들도 있는데, 로그인 성공 후 바로 요청하면 안되나요? 예, 로그인 성공 후 메뉴 리소스를 요청할 수 있습니다. 요청을 받은 후 다음 번 사용을 위해 스토어에 저장하지만, 사용자가 성공한 후 특정 하위 항목을 클릭하면 또 다른 문제가 발생합니다. 로그인 후 페이지에 진입 후 F5를 눌러 새로고침을 하면 이때는 GG인데, F5를 새로고침하면 스토어의 데이터가 사라지고, 로그인시 메뉴 리소스를 한 번만 요청했기 때문입니다. 이 문제를 해결하기 위한 두 가지 아이디어가 있습니다. 1. 메뉴 리소스를 저장소에 저장하지 말고, F5를 새로 고친 후에도 데이터가 그대로 유지되도록 localStorage에 저장합니다. 2. 마운트된 메서드에서 직접; 각 페이지에서 메뉴 리소스 로드로 이동하세요.

메뉴 리소스는 매우 민감하기 때문에 로컬에 저장하지 않는 것이 가장 좋으므로 옵션 1을 포기했습니다. 다만 옵션 2는 작업량이 좀 많아서 단순화하기 위한 조치를 취했습니다. 네비게이션 가드를 사용합니다.

Route Navigation Guard

내 구체적인 구현은 다음과 같습니다. 먼저 저장소에 빈 배열인 경로 배열을 만든 다음 다음과 같이 경로 전역 가드를 활성화합니다.

router.beforeEach((to, from, next)=> {
  if (to.name == 'Login') {
   next();
   return;
  }
  var name = store.state.user.name;
  if (name == '未登录') {
   if (to.meta.requireAuth || to.name == null) {
    next({path: '/', query: {redirect: to.path}})
   } else {
    next();
   }
  } else {
   initMenu(router, store);
   next();
  }
 }
)

여기 코드는 매우 짧습니다. , 하겠습니다 간단한 설명:

1. 가고 싶은 페이지가 로그인 페이지라면 이건 말할 것도 없고 그냥 바로 가세요.

2. 로그인 페이지가 아닌 경우 먼저 스토어에서 현재 로그인 상태를 가져옵니다. 로그인되어 있지 않은 경우 경로에 있는 메타 속성의 requireAuth 속성을 사용하여 내가 가고 싶은 페이지가 필요한지 확인합니다. 로그인이 필요한 경우 로그인 페이지로 돌아가서 로그인 페이지에 매개변수로 이동하려는 페이지의 경로를 전달하면 로그인이 필요하지 않은 경우 대상 페이지로 이동할 수 있습니다. , 바로가기(사실 이 프로젝트의 로그인 페이지만 로그인이 필요하지 않습니다.) ; 이미 로그인되어 있는 경우 먼저 메뉴를 초기화한 후 점프하세요.

초기화 메뉴의 동작은 다음과 같습니다.

export const initMenu = (router, store)=> {
 if (store.state.routes.length > 0) {
  return;
 }
 getRequest("/config/sysmenu").then(resp=> {
  if (resp && resp.status == 200) {
   var fmtRoutes = formatRoutes(resp.data);
   router.addRoutes(fmtRoutes);
   store.commit('initMenu', fmtRoutes);
  }
 })
}
export const formatRoutes = (routes)=> {
 let fmRoutes = [];
 routes.forEach(router=> {
  let {
   path,
   component,
   name,
   meta,
   iconCls,
   children
  } = router;
  if (children && children instanceof Array) {
   children = formatRoutes(children);
  }
  let fmRouter = {
   path: path,
   component(resolve){
    if (component.startsWith("Home")) {
     require(['../components/' + component + '.vue'], resolve)
    } else if (component.startsWith("Emp")) {
     require(['../components/emp/' + component + '.vue'], resolve)
    } else if (component.startsWith("Per")) {
     require(['../components/personnel/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sal")) {
     require(['../components/salary/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sta")) {
     require(['../components/statistics/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sys")) {
     require(['../components/system/' + component + '.vue'], resolve)
    }
   },
   name: name,
   iconCls: iconCls,
   meta: meta,
   children: children
  };
  fmRoutes.push(fmRouter);
 })
 return fmRoutes;
}

초기화 메뉴에서 먼저 스토어에 데이터가 존재하는지 확인합니다. 존재한다면 이 점프는 사용자가 F5를 누르는 것이 아니라 일반 점프라는 뜻입니다. 또는 특정 주소에서 직접 입력한 경우입니다. 그렇지 않으면 로딩 메뉴로 이동하세요. 메뉴를 가져온 후 먼저 formatRoutes 메소드를 사용하여 서버에서 반환된 json을 라우터에서 요구하는 형식으로 변환합니다. 서버에서 반환된 구성 요소는 문자열이므로 여기서는 주로 구성 요소를 변환하지만 라우터에서 필요한 것은 무엇입니까? 구성요소이므로 formatRoutes 메소드에서 필요한 구성요소를 동적으로 로드하기만 하면 됩니다. 데이터 형식이 성공적으로 준비된 후에는 데이터가 저장소에 저장되고 다른 한편으로는 라우팅의 addRoutes 메서드를 사용하여 이를 라우팅에 동적으로 추가합니다.

메뉴 렌더링

마지막으로 홈 페이지에서 스토어의 메뉴 json을 가져와서 메뉴로 렌더링합니다. 관련 코드는 Home.vue에서 볼 수 있으며 자세히 설명하지 않습니다.

좋아요, 이후에는 성공적으로 로그인한 후 다른 사용자가 다른 메뉴를 볼 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

vue.js에서 select의 값을 얻는 방법(자세한 튜토리얼)

Vue2.0 시리즈에서 필터를 사용하는 방법은 무엇입니까?

vue 프로젝트에서 트윈 메소드를 통해 최상위로 돌아가는 방법

vue를 사용하여 입력 내용이 모두 공백인지 확인하는 방법은 무엇입니까?

js를 사용하여 입력 상자가 공백이나 null 값이 될 수 없는지 확인하는 방법은 무엇입니까?

위 내용은 권한 관리 모듈을 로드하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!