第七天： uni-app 最實用的單點登錄及權限驗證

Uni-app

20200519 uni-app 最實用的單點登錄及權限驗證

登錄方法

/**
		 * 登錄
		 */
		sumbit () {
			this.$http.post('/sys/User/login', this.dataForm).then(({ data: res }) => {
				// 存儲token
				uni.setStorageSync('token', res.token)
				
				// 存儲用戶數據
				this.$store.dispatch('login', res.data).then(res => {
					// 判斷登錄成功是前往哪個頁面
					let pageCur = getCurrentPages()
					uni.showToast({
					    title: '登錄成功',
					    duration: 1000
					})
					if (pageCur[0].route !== 'pages/login/login') {
						uni.navigateBack()
					} else {
						uni.switchTab({
						    url: '/pages/tabbar/tabbar-1/tabbar-1'
						});
					}
				})
			})
		}

vux登錄狀態存儲

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		user: {
			loginname: "",
			username: "",
			mobile: "",
			gender: null,
			email: "",
			createDate: "",
			status: ""
		}
	},
	mutations: {
		login(state, user) {
			state.user = user
			// 緩存用戶信息
			uni.setStorageSync('user', JSON.stringify(user))
		},
		logout(state) {
			state.user = null
			// 清理緩存用戶信息
			uni.removeStorageSync('user')
		}
	},
	actions: {
		login({
			commit
		}, params) {
			return new Promise((resolve, reject) => {
				commit('login', params)
				resolve()
			})
		},
		logout({
			commit
		}) {
			commit('logout')
		}
	},
	getters: {
		user: state => {
			let user = uni.getStorageInfoSync('user')
			return JSON.parse(user)
		}
	}
})

export default store

請求攔截器，登錄狀態驗證

import uniRequest from '@/node_modules/uni-request/index.js';
import config from '@/config/index.js' // 全局域名配置

/**
 * 提供的方法有
 * uniRequest.request(config)
 * uniRequest.get(url[, config])
 * uniRequest.delete(url[, config])
 * uniRequest.head(url[, config])
 * uniRequest.options(url[, config])
 * uniRequest.post(url[, data[, config]])
 * uniRequest.put(url[, data[, config]])
 * uniRequest.patch(url[, data[, config]])
 * 
 */

// 全局配置
uniRequest.defaults.baseURL = config.baseUrl
// 請求攔截
uniRequest.interceptors.request.use(config => {
	// 賦值token
	config.headers.token = uni.getStorageSync('token') || new Date().getTime()
	// 防止緩存，GET請求默認帶_t參數
	if (config.method === 'get') {
		config.params = {
		  ...config.params,
		  ...{ '_t': new Date().getTime() }
		}
	}
	return config;
},err => {
	return Promise.reject(err);
});

// 響應攔截
uniRequest.interceptors.response.use((response) => {
	if (response.data.code === 401) {
		uni.showToast({
		    title: '登錄失效，請重新登錄',
			icon: 'none',
		    duration: 2000
		});
		setTimeout(function(){
			uni.navigateTo({ url: '/pages/login/login' })
		}, 1500)
		return Promise.reject(response.data.msg)
	}
	
	if (response.data.code === 1002) {
		uni.showToast({
		    title: response.data.msg,
			icon: 'none',
		    duration: 2000
		});
		return Promise.reject(response.data.msg)
	}
	return Promise.resolve(response);
}, (err) => {
	if (err && err.response) {
		switch (err.response.status) {
		  case 301: err.message = '請求的數據具有新的位置且更改是永久的'; break
		  case 302: err.message = '請求的數據臨時具有不同 URI'; break
		  case 304: err.message = '未按預期修改文檔'; break
		  case 305: err.message = '必須通過代理來訪問請求的資源'; break
		  case 400: err.message = '請求中有語法問題，或不能滿足請求'; break
		  case 402: err.message = '所使用的模塊需要付費使用'; break
		  case 403: err.message = '當前操作沒有權限'; break
		  case 404: err.message = '服務器找不到給定的資源'; break
		  case 407: err.message = '客戶機首先必須使用代理認證自身'; break
		  case 415: err.message = '請求類型不支持，服務器拒絕服務'; break
		  case 417: err.message = '未綁定登錄賬號，請使用密碼登錄後綁定'; break
		  case 426: err.message = '用戶名不存在或密碼錯誤'; break
		  case 429: err.message = '請求過於頻繁'; break
		  case 500: err.message = '服務器內部錯誤，無法完成請求'; break
		  case 501: err.message = '服務不支持請求'; break
		  case 502: err.message = '網絡錯誤，服務器接收到上上游服務器無效響應'; break
		  case 503: err.message = '服務器無法處理請求'; break
		  case 504: err.message = '網絡請求超時'; break
		  case 999: err.message = '系統未知錯誤，請反饋給管理員'; break
		}
	} else {
		err.message = '連接服務器失敗!'
	}
	uni.showToast({
	    title: err.message,
		icon: 'none',
	    duration: 2000
	});
	return Promise.reject(err);
});


export default uniRequest