後端程式
我使用的是laravel框架作為app的介面,前後端分離就涉及到登陸這個問題了,uni-app不支援讀寫cookie,所以不能使用cookie來儲存登陸狀態.後端我使用的是基於OAuth的擴充套件包Passport擴充套件包,這裡就不細寫安裝這個擴充套件包的過程了.詳情可以參考學院君的文章.
uni-app傳送登陸請求
預設的uni-app是一個使用 Vue.js.竟然這裡登陸狀態沒有cookie了,那麼我們咋麼儲存登陸狀態呢,我們是通過vuex儲存登陸狀態的.
const store = new Vuex.Store({
state: {
/**
* 是否需要強制登入
*/
forcedLogin: false,
hasLogin: false,
userInfo:{},
},
mutations: {
login(state, provider) {
state.hasLogin = true;
state.userInfo.access_token = provider.access_token, //access_token 是授權令牌,接下來訪問後端的介面都帶上token
state.userInfo.token_type = provider.token_type, //token_type 表示認證型別是 Bearer,
//我們可以將這個 access_token 值設定到 Bearer Authentication 請求頭去請求需要認證的後端 API 介面
uni.setStorage({
key:'userInfo',
data:provider,
})
},
logout(state) {
state.hasLogin = false;
state.userinfo={};
uni.removeStorage({
key:'userInfo'
})
}
}
})
export default store
複製程式碼登陸頁面
bindLogin() {
/**
* 客戶端對賬號資訊進行一些必要的校驗。
* 實際開發中，根據業務需要進行處理，這裡僅做示例。
*/
if (this.account.length < 5) {
uni.showToast({
icon: 'none',
title: '賬號最短為 5 個字元'
});
return;
}
if (this.password.length < 6) {
uni.showToast({
icon: 'none',
title: '密碼最短為 6 個字元'
});
return;
}
/**
* 下面簡單模擬下服務端的處理
* 檢測使用者賬號密碼是否在已註冊的使用者列表中
* 實際開發中，使用 uni.request 將賬號資訊傳送至服務端，客戶端在回撥函式中獲取結果資訊。
*/
const data = {
grant_type:'password',
client_id: 1,
client_secret: '資料庫中client_secret',//同上
username: this.account,
password: this.password,
};
// const validUser = service.getUsers().some(function (user) {
// return data.account === user.account && data.password === user.password;
// });
uni.request({
url:'http://guohang.test/oauth/token', //獲取訪問令牌
data:
{
grant_type:'password',
client_id: 1, //安裝passport,完成間授權註冊,資料庫生成的
client_secret: '資料庫中client_secret',//同上
username: this.account,
password: this.password,
},
method:'POST',
header:{
'Access-Control-Allow-Origin': '*', //跨域加上頭
'Content-Type': 'application/json; charset=UTF-8'
},
success:(res)=> { 檢驗成功返回狀態碼,訪問令牌等引數,使用vuex儲存狀態,後面請求伺服器介面都要帶上
const info={
access_token:res.data.access_token,
token_type:res.data.token_type,
};
if(res.statusCode==200){
this.login(info);
uni.reLaunch({
url:'../main/main',
});
}else{
uni.showToast({
icon: 'none',
title: '使用者賬號或密碼不正確',
});
}
},
})
},...mapMutations(['login']) ,
複製程式碼認證的頁面
因為頁面有些是需要登陸之後才能進行操作的,所以我們應該有個攔截器來進行判斷是否登陸,沒有登陸就跳轉登陸頁面,
import {
mapState,
mapMutations
} from 'vuex'
export default {
computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
onLoad() {
if (!this.hasLogin) {
uni.showModal({
title: '未登入',
content: '您未登入，需要登入後才能繼續',
/**
* 如果需要強制登入，不顯示取消按鈕
*/
showCancel: !this.forcedLogin,
success: (res) => {
if (res.confirm) {
/**
* 如果需要強制登入，使用reLaunch方式
*/
if (this.forcedLogin) {
uni.reLaunch({
url: '../login/login'
});
} else {
uni.navigateTo({
url: '../login/login'
});
}
}
}
});
}
}
}
複製程式碼