iT邦幫忙

0

請問Vue怎麼實作Admin權限才能登入的頁面(role based access)

  • 分享至 

  • xImage

各位大大好 小弟最近在實作vue admin角色登入才能看到的頁面,但不知道怎麼在前端實現,還請各位大時指點迷津:

我在backend做了一個endpoint "/users" 這裡會去判斷user是不是superuser如果是True的話才能進入 程式碼如下:

@router.get("/users", response_model=List[schemas.User])
def read_users(db: Session = Depends(get_db),
               current_user: models.User = Depends(get_current_user_from_token)):
    if current_user.is_superuser:
        users = user_crud.get_users(db)
        return users
    raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, 
                        detail="You are not permitted!!")

請問在Vue Login頁面要怎麼去判斷登入者是不是superuser,然後直接導到UserList頁面? 還是說有其他方式可以實現role based access這種判斷登入者的其他方法呢?

以下為Vue Login 頁面的程式碼:

<script>
import { mapActions } from "vuex";

export default {
  name: "Login",
  components: {},
  data() {
    return {
      form: {
        username: "",
        password: "",
        is_superuser:"",
      },
      showError: false
    };
  },
  methods: {
    ...mapActions(["LogIn"]),
    async submit() {
      const User = new FormData();
      User.append("username", this.form.username);
      User.append("password", this.form.password);
      User.append("is_superuser", this.form.is_superuser);
      try {
          await this.LogIn(User);
          this.$router.push("/");
          this.showError = false
      } catch (error) {
        this.showError = true
      }
    },
  },
};
</script>
Ares iT邦研究生 3 級 ‧ 2021-06-14 15:48:12 檢舉
可以在 router.beforeEach 內去做權限的判斷
小火車 iT邦新手 4 級 ‧ 2021-06-14 23:25:26 檢舉
感謝大大指點 我去找看看使用方法 謝謝
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
mengke.me
iT邦新手 5 級 ‧ 2021-12-18 23:37:13

可以通过导航守卫去实现。https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html

我要發表回答

立即登入回答