前后端交互2 vuex存儲token

1. 在vuex中新增login、initlogin方法

 　login方法作用是將token和user信息存入緩存

　 initLogin方法的作用是初始化聊天對象

　

import $U from '@/common/free-lib/util.js'
import $H from '@/common/free-lib/request.js'
import Chat from '@/common/free-lib/chat.js'

export default {
	state: {
		user: {},
		chat: null
	},
	actions: {
		// 登陸后的處理
		login({ state, dispatch }, user) {
			// 存到state中
			state.user = user;
			// 存儲到本地存儲中
			$U.setStorage('token', user.token)
			$U.setStorage('user', JSON.stringify(user))
			$U.setStorage('user_id', JSON.stringify(user.id))

　　　　　　　　　　　　　　 // 連接websocket
　　　　　　　　　　　　　　 state.chat = new Chat({
 　　　　　　　　　　　　　　　url: 'ws://127.0.0.1:7001/ws'
　　 　　　　　　　　　　　})

		},
		// 初始化登錄狀態
		initLogin( {state, dispatch }) {
			// 拿到存儲數據
			let user = $U.getStorage('user')
			if (user) {				
				// 初始化登錄狀態
				state.user = JSON.parse(user)
				
				// 連接websocket
				state.chat = new Chat({
					url: 'ws://127.0.0.1:7001/ws'
				})
				
				console.log(state.chat+ '=============')
				console.log('====================')
			}
		}
	}
}
　　

　

2. 新建聊天Chat類

import $U from './util.js'
import $H from './request.js'
import $C from './config.js'

class Chat {
	constructor(arg) {
	　　 // 初始化url、是否在線
	    this.url = arg.url
		this.isOnline = false
		this.socket = null
		
		// 獲取當前用戶相關信息
		const user = $U.getStorage('user')
		this.user = user ? JSON.parse(user) : {}
		
		// 初始化聊天
		// To表示當前聊天對象的對方
		this.To = false
				
		// 連接和監聽
		if (this.user.token) {
			this.connectSocket()
		}
	}
	
	// 連接socket
	connectSocket() {
		// 連接websocket（ 注意：需要添加token信息）
		this.socket = uni.connectSocket({
			url: this.url + '?token='+this.user.token,
			complete: () => {}
		})
		
		// 監聽連接成功
		this.socket.onOpen(() => this.onOpen())
		
		// 監聽斷開
		this.socket.onClose(() => this.onClose())
		
		// 監聽接收信息
		this.socket.onMessage(res => this.onMessage(res))
		
		// 監聽錯誤
		this.socket.onError(() => this.onError())
	}
	
	onOpen() {
		// 用戶上線
		this.isOnline = true
		console.log('socket連接成功')
		
		// 獲取用戶離線消息
	}
	
	onClose() {
		// 用戶下線
		this.isOnline = false
		this.websocket = null
		console.log('socket關閉')
	}
	
	onError() {
		// 用戶下線
		this.isOnline = false
		this.socket = null
		console.log('socket連接錯誤')
	}
	
	// 監聽接收消息
	onMessage(res) {
		console.log(res)
	}
	
	// 創建聊天對象
	createChatObject(detail) {
		this.To = detail
		console.log('創建聊天對象', this.To)
	}
	
	// 銷毀聊天對象
	destoryChatObject() {
		this.To = null
		console.log('銷毀聊天對象', this.To)
	}
	
	// 組織發送信息格式
	formatSendData(params) {
		return {
			id: 0,// 唯一id， 用於撤回
			from_avatar: this.user.avatar,// 發送者頭像
			from_name: this.user.name,// 發送者昵稱
			from_id: this.user.id,// 發送者id
			to_id: this.To.user_id,// 接收人人/群 id
			to_name: this.To.nickname,// 接收人/群 名稱
			to_avatar: this.To.avatar,// 接收人/群 頭像
			chat_type: 'user' ,//接收；類型
			type: params.type,// 消息類型
			data: params.data,
			potions: params.options ? params.options : {},
			create_time: (new Date()).getTime(),
			isremove: 0,
			sendStatus: 'pending'// 發送狀態
		}
	}
}

export default Chat

　　

3. 在登錄頁面Login.vue中，當點擊按鈕觸發submit事件時，發送登錄post請求，將token和user信息添加到緩存, 且連接websocket

submit() {
		$H.post('/'+this.type, this.form, {
			token: false,
		}).then(res => {
			if (this.type === 'login') {
				this.$store.dispatch('login', res)
				uni.showToast({
					title: '登錄成功',
					icon: 'none'
				});
				// 跳轉到tabbar頁面需要用switTab
				return uni.switchTab({
					url:"/pages/tabbar/index/index"
				})
			}
			// 注冊
			this.changeType()
			uni.showToast({
				title: '注冊成功',
				mask: false,
				duration: 1500
			});
		})
	}