JavaScript一些判断写法

例1:if else if else

const fn =(status)=>{
      if(status === 1.1){
        console.log(1);
      }else if(status === 2){
        console.log(2.2);
      }else if(status === 3){
        console.log(3.3);
      }else{
        console.log(4.4);
      }
    }
    fn(3)

例2:三元运算

const fn = (status) => {
      let action = status === 1 ? 
      console.log(1.1) : (status === 2 ? 
      console.log(2.2) : (status === 3 ? 
      console.log(3.3) : console.log(4.4)))
      return action
    }
    fn(2)

例3:对象数组方法

const actions ={
      '1':[1,1.1],
      '2':[2,2.2],
      '3':[3,3.3],
      'default':[4,4-4]
    }
    const fn = (status) => {
    let action = actions[status] || actions['default']
    console.log(action[0]);
    console.log(action[1]);
    }
    fn(2)
    

例4:switch  case

 const fn = status => {
      switch (status) {
        case 1:
          console.log(1.1);
          break
        case 2:
          console.log(2.2);
          break
        case 3:
          console.log(3.3);
          break
      }
    }
    fn(2)

例5:map

const actions = new Map([
      [1,[1.1,1.2]],
      [2,[2.2,2.3]],
      [3,[3.3,3.4]],
      ['default',[4.4,4.5]]
    ])
    const fn = (status) =>{
      let action = actions.get(status) || actions.get('default')
      console.log(action[0]);
      console.log(action[1]);
    }
    fn(2)

 

<think>我们原本的条件是:如果role包含"submit",则显示四个控件(submit、collect_i、collect_t、collect_c),否则隐藏。现在要求:除了role包含"submit"的情况,还要在user为'admin'时也显示这些控件。因此,我们需要修改条件判断,使用逻辑或(||)将两个条件组合:if(role.includes("submit")||user==='admin')注意:这里假设user变量已经定义,并且存储了当前用户的用户名(如'admin')。如果user变量不存在,我们需要先获取当前用户的信息。修改后的代码:原代码:if(role.includes("submit")){...//显示控件}else{...//隐藏控件}修改为:if(role.includes("submit")||user==='admin'){...//显示控件}else{...//隐藏控件}但是,请注意,我们可能还需要考虑user变量从何而来。根据引用[2],后端使用jwt进行校验,那么前端可能从jwt令牌中解析出用户信息,或者从某个全局状态(比如Vuex)中获取。假设我们在组件的data中有一个user字段,或者从某个地方(比如localStorage)获取了当前用户。例如,在Vue组件中,我们可能这样写:data(){return{user:'当前用户名',//实际中可能从Vuex或localStorage中获取//...其他数据}}然后在条件判断中使用this.user。因此,修改后的代码可能如下:if(this.role.includes("submit")||this.user==='admin'){this.options.form.getWidgetByName("submit").setVisible(true);this.options.form.getWidgetByName("collect_i").setVisible(true);this.options.form.getWidgetByName("collect_t").setVisible(true);this.options.form.getWidgetByName("collect_c").setVisible(true);}else{this.options.form.getWidgetByName("submit").setVisible(false);this.options.form.getWidgetByName("collect_i").setVisible(false);this.options.form.getWidgetByName("collect_t").setVisible(false);this.options.form.getWidgetByName("collect_c").setVisible(false);}注意:如果role和user都是响应式的(比如Vue的data属性),那么当它们变化时,这段代码需要重新执行。我们可以将这段逻辑放在一个方法中,并在需要的时候调用(比如在mounted钩子中,或者在watch中监听role和user的变化)。另外,如果用户角色不止一个,比如admin用户可能同时具有多个角色,那么条件判断也可以写成:if(this.role.includes("submit")||this.role.includes("admin")||this.user==='admin')但这里根据需求,我们只判断用户名为admin,所以用user==='admin'即可。如果user是从jwt令牌中解析出来的,我们可以这样获取(示例)://假设token存储在localStorage中consttoken=localStorage.getItem('token');//解析token(实际项目中可能使用jwt-decode库)constpayload=JSON.parse(atob(token.split('.')[1]));this.user=payload.username;//或者payload.user,具体看后端返回的字段但是,注意:在Vue组件中,我们可能不会直接这样写,而是通过Vuex存储用户信息,然后在组件中使用mapState来获取。总结:修改条件判断为逻辑或,同时确保user变量可用。如果当前上下文中没有user变量,我们需要先获取当前用户信息。根据引用[2],后端使用jwt,所以前端存储了token,我们可以从token中解析出用户名。但是注意,解析jwt需要引入一个库(如jwt-decode)或者使用atob(但atob只能解析base64,且需要处理token结构)。在Vue项目中,通常会在登录后将用户信息存储在Vuex中,然后在各个组件中使用。因此,这里假设user已经存储在组件的data中或者可以通过this访问。代码修改示例://在Vue组件中,我们可能这样写//假设在组件的某个方法或生命周期钩子中consttoken=localStorage.getItem('token');//或者从Vuex获取if(token){constpayload=JSON.parse(atob(token.split('.')[1]));this.user=payload.username;//或者payload.sub,具体看后端实现}然后就可以在条件判断中使用this.user。但是,如果这段代码在Vue组件外(比如一个普通的js文件),那么需要确保user已经作为参数传入或者从全局状态获取。因此,请根据实际项目情况调整获取user的方式。修改后的代码(假设在Vue组件内,且已经获取了user):</think>### 修改条件判断实现双条件控制 要同时满足 `role.includes("submit")` 或 `user === 'admin'` 的条件,需要使用逻辑或运算符 `||` 组合两个条件。以下是修改后的代码: ```javascript // 修改后的条件判断 if (role.includes("submit") || user === 'admin') { this.options.form.getWidgetByName("submit").setVisible(true); this.options.form.getWidgetByName("collect_i").setVisible(true); this.options.form.getWidgetByName("collect_t").setVisible(true); this.options.form.getWidgetByName("collect_c").setVisible(true); } else { this.options.form.getWidgetByName("submit").setVisible(false); this.options.form.getWidgetByName("collect_i").setVisible(false); this.options.form.getWidgetByName("collect_t").setVisible(false); this.options.form.getWidgetByName("collect_c").setVisible(false); } ``` ### 关键修改说明: 1. **使用逻辑或运算符 `||`**: ```javascript if (role.includes("submit") || user === 'admin') ``` 这表示只要满足以下任一条件,就会执行显示逻辑: - 用户角色包含 "submit" - 用户名为 "admin" 2. **安全建议**: - 实际项目中应从 JWT 令牌获取用户信息,避免前端硬编码验证: ```javascript // 从JWT令牌解析用户信息 const token = localStorage.getItem('authToken'); const payload = JSON.parse(atob(token.split('.')[1])); const user = payload.username; // 或 payload.sub ``` - 后端必须进行二次验证,防止前端篡改[^2] 3. **优化建议**: ```javascript // 使用数组减少重复代码 const adminControls = ["submit", "collect_i", "collect_t", "collect_c"]; const isAdminAccess = role.includes("submit") || user === 'admin'; adminControls.forEach(control => { this.options.form.getWidgetByName(control).setVisible(isAdminAccess); }); ``` ### 完整示例(结合 JWT 验证): ```javascript // 从JWT令牌获取用户信息 const token = localStorage.getItem('authToken'); const payload = JSON.parse(atob(token.split('.')[1])); const user = payload.username; const roles = payload.roles; // 假设JWT包含角色数组 // 控制逻辑 const isAdminAccess = roles.includes("submit") || user === 'admin'; ["submit", "collect_i", "collect_t", "collect_c"].forEach(control => { this.options.form.getWidgetByName(control).setVisible(isAdminAccess); }); ``` ### 相关问题 1. 如何从 JWT 令牌安全解析用户角色信息?[^2] 2. 前端可见性控制如何与后端权限验证协同工作? 3. 多角色系统(如 admin、editor、user)如何实现精细化的表单控制? 4. 使用 `localStorage` 存储 JWT 令牌有哪些安全注意事项? 5. 如何实现角色变更时的表单控件动态更新? [^1]: 表单控件应由用户自定义,通过 action、method 和 name 属性定义行为 [^2]: 后端必须使用 Spring Security 等框架进行权限验证,防止前端篡改
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值