1. 程式人生 > >vue學習十 vue專案登入簽名驗證

vue學習十 vue專案登入簽名驗證

1.登陸認證(demo版暫只支援手機號登陸)- 同時獲取使用者基本資訊

step1: app端通過appId向微信拉取authorization_code

step2:請求介面url

 created(){
     //獲取sessionStorge 資料 呼叫imToken,一般在呼叫到該介面後肯定是有資料的,及時獲取到token資料
     if (imToken() === null) {
         this.userLogin();
     }
 },

在此處進行獲取imToken值

function imToken() {
    return sessionStorage.getItem('imToken'
); }

此時若不含值,則進行資訊登入重新獲取

  methods:{
    //使用者資訊登入
    async userLogin() {

        //測試賬號資料資訊
        let params = {"lg_pin":"","logType":"","cellPhone":""};

        const res = await this.$http.get(this.$api.login, params);

        //調取資料成功
        if (res.data.code === 0) {
            //判斷資料是否為空
            if
(res.data.data.length != 0 || res.data.data.length != null) { setImtoken(res.data.data.imToken); setPin(res.data.data.pin); } else { } }else { setImtoken(null) } } },

2.在api介面中實現加密/轉碼操作

a.get請求呼叫,傳遞api的引數
除去登入以外,需要將業務引數和系統引數追加成一個urlEncode格式

  get (url, params) {
    var param;
    //判斷登入情況,此時若為登入不需要加密處理
    if (url === "/login") {
      param = params;
    }else {

      param = formateParm(params);
    }
    var urlencode = urlEncode(host + url,param);
    return axios({
      method: 'get',
      url:urlencode,
      timeout: 10000,
      headers: {
          'content-Type': 'application/json'

      },
      request: 'XMLHttpRequest',
    }).then(
      (response) => {
          // console.log(response.status)

          return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  }

格式化引數,在業務引數中追加系統引數,pin/時間戳/token值

通過SHA.js合成引數值

function formateParm(parm) {

    var sign = "";
    parm['pin'] = pin();

    var timeStamp = new Date().getTime();

    console.log(timeStamp);

    parm['timeStamp'] = timeStamp;
    var params = Object.keys(parm).sort();
    for (var ki in params) {
        sign += params[ki] + parm[params[ki]];
    }

    sign = sign + imToken();

    console.log(SHA1(sign) + "--sha1")

    parm["sign"] = SHA1(sign);

    return parm
}

轉碼urlEncode格式

let urlEncode = (url, data) => {
   if (typeof (url) === undefined || url === null || url === ''){
        return ''
    }else if (typeof (data) === undefined || data === null || typeof (data) !== 'object'){
        return url
    }else {
       url += (url.indexOf('?') !== -1) ? '' : '?'
       for (let k in data) {
           url += ((url.indexOf('=') !== -1) ? '&' : '') + k + '=' + encodeURI(data[k])
       }
       return url
   }
}

相關推薦

vue學習 vue專案登入簽名驗證

1.登陸認證(demo版暫只支援手機號登陸)- 同時獲取使用者基本資訊 step1: app端通過appId向微信拉取authorization_code step2:請求介面url created(){ //獲取sessionStorge

vue學習vue專案打包後介面開啟報錯 404

專案進展到最後,vue框架即將完工了,在最後到打包中,又遇到一個大坑 npm run build 在執行命令打包後,發現開啟dist檔案內的index.html後,介面空白,並且在控制檯處報錯為404,查詢不到對應到css。 此時為路徑問題,解決方法為

vue學習(prop傳參、v-bind傳參、$emit向父級傳送訊息、input元件上使用 v-model、事件拋值)

基本示例 元件是可複用的 Vue 例項,且帶有一個名字:在這個例子中是 。我們可以在一個通過 new Vue 建立的 Vue 根例項中,把這個元件作為自定義元素來使用 <div id="components-demo"> <

vue學習一(prop傳不同值、 v-bind 動態賦值、單向資料流、prop校驗)

區域性註冊 在這些情況下,你可以通過一個普通的 JavaScript 物件來定義元件: var ComponentA = { /* ... */ } 然後在 components 選項中定義你想要使用的元件: new Vue({ el: '#app',

vue學習五(props解耦、props 布林-物件-函式三種模式)

$route耦合 在元件中使用 $route 會使之與其對應路由形成高度耦合,從而使元件只能在某些特定的 URL 上使用,限制了其靈活性。 <!DOCTYPE html> <html lang="en"> <head>

vue學習七(vue-resource使用)

Vue.js是資料驅動的,這使得我們並不需要直接操作DOM,如果我們不需要使用jQuery的DOM選擇器,就沒有必要引入jQuery。vue-resource是Vue.js的一款外掛,它可以通過XMLHttpRequest或JSONP發起請求並處理響應。也就是

vue學習vue專案轉移之後的生成依賴包

1.最近從gitos上面clone了程式碼之後,執行在新環境,但是vue專案啟動失敗,缺失依賴包。 2.最後的正確操作是刪除module檔案包,重新執行npm install 進行下載依賴包,具體的一

vue學習() v-for循環普通數組 、對象數組、 叠代數字

span count clas spa 小白 開始 叠代 back nbsp //html <div id="app">  <p v-for="item in list">{{item}}</p> <p v-for="(it

vue學習(二) 指令v-if v-show

樣式 指令 進行 val ogg vue type NPU div //html <div id="app">  <input type="button" value="toggle" @click="flag=!flag"/>     &l

vue學習(五) 過濾器簡單實用

html 文本 連續 replace 學習 repl div cti 函數 vue過濾器: 概念:vue.js允許你自定義過濾器可被用作一些常見文本的格式化。過濾器可以用在兩個地方:插值表達式 v-bind表達式 由管道符指示 //過濾器調用時候的格式 {{

vue學習(六) 自定義私有過濾器 ES6字符串新方法 填充字符串

pad 兩個 fff 調用 method === .get dst nds <div id="app">  <p>{{data | formatStr(‘yyyy-MM-dd‘)}}</p></div> //scr

VUE學習vue運行環境搭建遇見的小問題

運行 打開 serve 關閉 分行 集成 解決方法 使用 vue 1.使用vscode來編輯項目,那麽首先給它搭一個vue運行的環境,打開集成終端,使用npm install live-server -g安裝live-server. problem1:cmd終端分行問題。解

vue學習vue-resource的引入

font 分享 ont .cn strong com ins 當前 all 1、安裝vue-resource到項目中,找到當前項目 輸入:npm install vue-resource --save 2、安裝完畢後,在main.js中導入,如下所示: import

vue學習 ---- 使用vue-router 進行跳轉

調用 logs 博文 target export template -c pack vds 前提說明,在學習vue的時候,盡量的以官網的為主,而且框架本身與官方文檔都是在不斷叠代更新的。 在vue的框架中,目前都是使用vue-router 來進行頁面跳轉的,而不是<a

VUE學習之------Vue.nextTick

在專案中最近遇到一種情況: 在一個頁面中點選快捷鍵會調出另一個頁面,這個頁面一個元素是輸入框,一個元素是button。剛調出這個頁面的時候焦點要在輸入框中,這樣使用者就可以直接進行輸入了。 從這個需求來看,點選快捷鍵的時候用v-show = true 來進行顯示,然後把焦點focus到輸入框上,

Vue學習(9)————————Vue路由,設定請求頭,動態路由(路由傳值,get傳值)

簡述 之前都是手動的網跟元件中引入其他元件(import),路由的作用就是讓他自動掛載元件組成介面  1.安裝  npm install vue-router  --save   / cnpm install vue-router&nbs

Vue學習vue例項中的資料、事件和方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia

Vue學習vue屬性綁定和雙向數據綁定

bin doc scrip char 屬性 1.0 pre wid scale ··· <!DOCTYPE html> vue <!-- vue中的屬性綁定和雙向數據綁定 屬性綁定: v-bind:title="t

Vue學習vue屬性繫結和雙向資料繫結

··· <!DOCTYPE html> vue <!-- vue中的屬性繫結和雙向資料繫結 屬性繫結: v-bind:title="title" 或 :title="title" 雙向資料繫結: v-model -->

Vue學習vue中的v-if,v-show,v-for

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia