? ?? ????? ?? ??? ?????. ??? ? ??? ?????? ??? ? ??? (? : ??? ??)????? ???? ?? ???? ?? ??? ????? ?? ???? ?? ??? ???? ? ??? ? ????.

?? ????? ????? ?? ?? ??? ???? ???? ???? ??? ???? ???? ???? ???? ??? ???? ???? ?????? ??? ????? ?????. ?? ? ?? ?? ???? ????? ????? ??? ? ?? ???? ???????. ??? ???? ???? ??? ????? ???? ?? ? ? ??????.

VUE? ?? ?? ??? ?? ??? ??? ?? ? ?? ??? ?? ???? (SPA)? ?? ???? ??? ???? ???? ?? ? ? ????. ?? ???? ????? ???? ?? ?? ???? ??? ??? index.html? ? ??? ? ????. ???? ??? ??? ????? ??? ???? ?????. ? ??? ?? ???? ??? ?????. ??? ????? VUE? ????? ??? ???? ?? ?? ??? ?? ? ????. ?? ??? ??? ?? ???? ?? ??? ??? ????? ? ??????. ??? ??? ????? ??? ???.

??? ?? ??

Navigation Guard? VUE ???? ?? ???? ??? ?? ??? ?? ?? ??? ?????. ??? ?? ?? ??? ???? ?? ??? ??? ???? ?? ???? ???? ?????.

Vue ????? Global Guards, Router ?? ??? ? ?? ?? ??? ? ?? ?? ??? ????. ???? ? ? ???, ????? (?, URL? ?? ? ?)? ??? ? ? ??? ??? ????, ?? ??? ?? ? ? (?, URL? ?? ??? ?? ? ?) ?? ?? ??? ???? ???? ?? ??? ??, ???? ?? ?? ? ? ?? ?? ??? ?????. ? ???? ?? ???? ?????? ??? ? ??? ?? ??? ????. ??? VUE ???? ? ?? ???? ??? ??? ?? ??? ??? ?????.

??? ??

• beforeEach : ??? ???? ?? ?? (? ??? ??? ? ? ????)
• beforeResolve : ????? ?? ?? ????? ?? ?? ?? ? (? ??? ??? ? ??? ??? ??)
• afterEach : ??? ??? ? ?? (?????? ??? ? ? ??)

?? ?? ??

• beforeEnter : ?? ??? ???? ?? ?? (??? ??? ??? ???? ??? ? ? ????).

?? ?? ??

• beforeRouteEnter : ????? ?? ?? ?? ?? ?? ?? ???? ?? (??? ? ? ????)
• beforeRouteUpdate : ??? ?? ??? ???? ? ??? ?? ? ? ?? ? ??
• beforeRouteLeave : ??? ??? ?? ?????

???? ??????

????? ????? ??? ?????? ?? ?? ????? ?? ?? ??? ? ????. ?? ??, ??? ?? ?????? ????? ??? ?? ?? ??? ??? ?? ?? ? ? ????? ??? Global Afterach Guard? ??? ? ????. ?? ?? ?? ?? ???? Vuex Storage? ?? ????? Preverenter Route ?? ??? ???? ??? ? ? ????.

? ??? ??? ??? ??? ???? ?? ?? ??? ???? ??? ?? ?? ?? (? : ?? ??)? ?????. ? ?? ??? ???? ?? ??? ???? ?? ??? ??? ??? ? ? ????. ?, ???? ???? ?? ???? ??? ?????????? ??? ? ????. ?? ??? ?? ?? ?? ??? ?? ?? ?? ?? ?? ?? ?? ??? ??? ??? ????? ??? ?? ?????. ??? ?? ? ??? ???? ?? ??? ?????. ??? ??? ?? ??? ?? ??? ?? ? ????.

 Const Router = New Vuerouter ({{
  ?? : [
    ...
    {
      ?? : "/??",
      ?? : "??",
      ?? ?? : import (/ * WebPackChunkName : "Protected" */'./protected.vue "),
      ?? (To, From, Next) {
        // ??? ??}
    }
  ]]
})

??? ??

?? ??? ??? Vue ????? ?? ??? ?? ????? ??? ??? ????. ? ?? ?? ??? ?????. to , ?? ????? ???? "??"??; , ?? ????? ??? "??/??? ??"?? from ; next , ??? ????? ???? ?? ?? ???? ??.

????? vue ???? ??? ? ??? ???? ?????. ??? ??? ??? ? ?? ??? ?????. ??? ??, ??? ?? ???? ?? ??? ??? ? ??? ???? ???? ? ??? ?? ??? ??? ????????. ?????? ??? ?? ??? ?????. ?????? ?? ??? ???? ???? ???? ???? ?? ??? ????.

 ??({
  ?? : "?? ??"
})

? ???? ???? ?? ??? ???? Vuex ??? ??? ?? ? ???. ????? ??? ??? ?????? ??? ???? ???? ?? ??? ?? ?????.

 ?? (To, From, Next) {
  // Vuex Storage ?? //
  if (store.getters [ "auth/haspermission"]) {
    ??()
  } ? ?? {
    ??({
      ?? : "?? ??"// ?? ??? ?? ?? //
    });
  }
}

???? ??? ???? Vuex ??? ?? ? ??? ??? ?????? ?????? ????? ??? ???? Async/Await? ??? ???.

 Async prectionenter (to, from the Next) {
  ???? {
    var haspermission = await store.dispatch ( "auth/haspermission");
    if (haspermission) {
      ??()
    }
  } catch (e) {
    ??({
      ?? : "?? ??"// ?? ??? ?? ?? //
    })
  }
}

??? ??????

???? ??? ????? ??? ?? ???? ??? ?? (?, ?? ?? ???)? ?????? ?? ??? ????? ?? ???? ??? ??????. ???? ???? ??? ?? ??? ??????. ????? ??? ?? ???? ???? ??? ???? ???? ??? ????? ?????? ???? ????? ?? ????? ?????? ?????. ? ??? ???? ?? ????? ??, ? ??????? ??? ???? ??? ???.

?? ?? ??? ?? ??? ?????? ?? ? ? ????. ?? ?? ?? ? ??? ??? ???? URL? ?? ? ? ????. ??? ???? ?? ?????? ?? ? ??? ???? ?? ??? ??? ??? ??????? ??? ? ? ????. ??? ??? ??? to.fullpath.

 Async prectionenter (to, from the Next) {
  ???? {
    var haspermission = await store.dispatch ( "auth/haspermission");
    if (haspermission) {
      ??()
    }
  } catch (e) {
    ??({
      ?? : "???", // ?? ??? ?? ?? //
      ?? : {redirectfrom : to.fullpath}
    })
  }
}

??

???? ?? ? ??? ??? ? ??? ?? ??? ????? ?? ??? ??? ?? ?? ?? (?????? ??? ??? ??)? ?? ???? ???? ??? ????. ?? ?? ?? ?? ??, ?? BeforourouteEnter? ???? ????? ????? ??? ? ????. ??? ??? ?? ?? ??? ???? ??? ???? ??? ??? ??? ???? ????? ????? ??? ? ????.

 BeforeRouteEnter (To, From, Next) {
  if (to.query.redirectfrom) {
    // ?? //
  }
}

??? ????? ?? ????? ??? ?? ??? ?? ??? ???????. ??? ?? ?? ?? ??? ??? ??? ??? ??? ? ??? ????. ??? ?? ??? ?? ?? ???? vue ????? ??? ? ? ??? ????. ??! ??? ??? ?? ????.

 ?? (() => {
  Console.log (this) // ??? vue ???????})

?? ??? ??? ? ??? ??? ??? ????? ???? ?? ??? ????. ? ?? VM? ??? ???? VUE ????? ??? ??? ? ? ????.

 ?? (vm => {
  console.log (vm) // ??? vue ???????})

?? ?? ???? ?? ?? ???? ??? ??? ?? ???? ???? ???? ? ? ?? ??? ?? ?????. ? ??? ???? ??? ?? ?? ??????.

<template><div>
    {{errormsg}}

    ...

  </div>
</template>

<script>
export default {
  name: "Error",
  data() {
    return {
      errorMsg: null
    }
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.redirectFrom) {
      next(vm => {
        vm.errorMsg =
          "對不起，您沒有訪問請求路由的權(quán)限"
      })
    } else {
      next()
    }
  }
}
</script>

?????

??? ?? ????? ???? ????? ???? ? ????. ??? ?? ???? ??? ????? ?? ???? ??? ??? ??? ???? ?? ???? ???? ???? ?? ? ???? ?????? ??? ?????. ???? ??? ??? ?? ?????? ??? ????? ?????. ?? ???? ??? ???? ???? ????? ??? ???? ???? ?? ????. NetLify? ?? ?? ?? Auth0? ??? ?? ?? ?? ??? ????.

? ??? ????? ??? VUE ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!