各位大大好 小弟最近在實作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