如何在JS登录验证代码中新增访客等其他用户的登录校验逻辑

方案1：直接扩展条件判断（符合你提到的条件判断实现思路） #

直接在原有判断逻辑上新增账号密码的校验分支即可，还可以额外区分不同用户的权限、跳转路径：

methods: {
    login() {
        // 校验管理员账号
        const isAdmin = this.input.username == "admin1" && this.input.password == "pass1"
        // 校验访客账号
        const isGuest = this.input.username == "guest" && this.input.password == "guest123"
        if(isAdmin || isGuest) {
            this.$store.commit("setAuthentication", true);
            // 不同角色跳转到不同页面
            if(isAdmin) {
                this.$router.replace({ name: "secure" });
            } else if(isGuest) {
                this.$router.replace({ name: "guestPage" });
            }
        } else {
            console.log("The username and / or password is incorrect");
        }
    }
}

这种写法逻辑简单直观，适合少量用户的场景，后续加新用户只要新增对应的校验变量，再把变量加到if的判断条件里就行。

方案2：配置化实现（更易维护，推荐学习使用） #

如果后续要加的用户比较多，建议把合法用户统一放到配置列表里，后续加用户只要改配置不需要动逻辑：

methods: {
    login() {
        // 合法用户配置列表，新增用户直接在这个数组里加对象即可
        const validUserList = [
            { username: "admin1", password: "pass1", role: "admin", redirectRoute: "secure" },
            { username: "guest", password: "guest123", role: "guest", redirectRoute: "guestPage" }
        ]
        // 匹配输入的账号密码是否合法
        const loginUser = validUserList.find(item => 
            item.username === this.input.username && item.password === this.input.password
        )
        if(loginUser) {
            this.$store.commit("setAuthentication", true);
            // 可以把用户角色存入store，方便后续页面做权限控制
            this.$store.commit("setUserRole", loginUser.role);
            this.$router.replace({ name: loginUser.redirectRoute });
        } else {
            console.log("The username and / or password is incorrect");
        }
    }
}

注意 #

以上两种写法仅适合本地学习测试使用，不要在生产环境使用前端硬编码账号密码的校验方式，真实业务的账号校验必须调用后端接口完成，避免账号密码直接暴露在前端代码中引发安全问题。

内容的提问来源于stack exchange，提问作者Abraham Felix