1、定義js檔案，這裡是放在static下的js檔案下

程式碼如下：

// 判斷許可權
function hasPermissionJs(val) {
  var restoredSession = JSON.parse(sessionStorage.getItem('userInfo'));
  var roles = restoredSession.user.roles;
  for(var i=0; i<roles.length; i++){
    for(var j=0; j<roles[i].authorities.length; j++){
      if(val == roles[i].authorities[j].mtag){
        return true;
      }
    }
  }
  if(restoredSession.isAdmin==true){
    return true;
  }
  return false;
}

// 彈框提示
function tips(this_, message_, type_){
  this_.$message({
    message: message_,
    type: type_
  });
}

export { //很關鍵
  hasPermissionJs,
  tips,
}
 

2、在介面的script標籤中進行引入即可使用

<script>
import {hasPermissionJs, tips} from '../../static/js/my.js'
</script>

    例如執行刪除操作時，呼叫tips，程式碼如下：

    deleteAction(content, arr) {
      this.$confirm(content, '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = new URLSearchParams();
          params.append('uid', arr);
          this.$http.post("/api/v1/user/delete", params)
            .then(response => {
              if(response.data.data == 'deleteAdminUser'){
                tips(this, '非法操作，不能刪除admin使用者！', 'error');
                return;
              }
              if(response.data.data == 'deleteYourself'){
                tips(this, '非法操作，不能刪除自己！', 'error');
                return;
              }
              tips(this, '刪除成功！', 'success');
              this.findPagesByCondition();
            })
        }).catch(() =>{
          // 取消
        });
    }
 

3、注意事項

① js檔案中的export必須要寫！！！

② 如果引入的方法是要在DOM載入時就呼叫的，例如使用者列表頁面中，有刪除、編輯等操作按鈕，根據許可權進行展示與否的判斷，程式碼如下：

<el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="deleteUser(scope.row)" type="text" v-if="hasPermission('user:delete')">刪除</el-button>
        <el-button @click="userForm(scope.row)" type="text" v-if="hasPermission('user:edit')">編輯</el-button>
        <el-button @click="userVersionForm(scope.row)" type="text" v-if="hasPermission('user:dataAssign')">分配資料許可權</el-button>
      </template>
</el-table-column>
 

那麼此時需要在methods中這樣寫，就可以在頁面載入時就判斷許可權：

methods: {
    // 判斷許可權
    hasPermission: hasPermissionJs,
    
    }