各位大大好 小弟最近在實作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>
可以通过导航守卫去实现。https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html