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