使用 vue + vue-socket + token驗證 + redis + 外部 Api

寫了個簡單的DEMO,不懂操作的同學可以看看,安裝 vue 就不多說了呆贿,官方文檔很詳細

#安裝服務器端
npm install --save socket.io
npm install --save express
npm install --save request
npm install --save redis

#安裝客戶端
npm install --save socket.io-client
#安裝VUE庫
npm install --save vue-socket.io

在vue的 main.js 里寫上

//與服務端鏈接
import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client'
Vue.use(VueSocketio, socketio('ws://127.0.0.1:3000',{
    query: 'token=1234567'
  }));

編輯 App.vue,編寫事件方法

<script>
export default {
  name: 'app',
  sockets:{
        //跳轉(zhuǎn)登陸界面
        auth_to_login:function(){
            this.$router.push({ name: 'login'});
        },
        //跳轉(zhuǎn)到首頁
        auth_to_index:function(){
            this.$router.push({ name: 'Index'});
        }
  }
}  
</script>

服務端端代碼

let socketIo = require('socket.io');
let express = require('express');
let request = require('request');
let redis = require('redis');

let redisClient = redis.createClient;

let httpPort = 3000;
let channelId = 1
let app = express();

app.get('/',function(req,res){
    res.send('啟動成功:' + httpPort);
});

//連接redis
let cache = redisClient({ port: 6379, host: '127.0.0.1' });
 
let server = require('http').createServer(app);
let io = socketIo(server);

io.on('connection',function(socket){ 
    console.log('有客戶端連接' + socket.id);
    //取得token
    let token = socket.handshake.query.token;
    //根據(jù)token看是否有效登陸狀態(tài)
    if (!token){
        console.log('沒有授權(quán)');
        socket.emit('auth_to_login');
        return false;
    }else{
        #通過取得redis cache判斷
        cache.get(token, function (err, response) {
            if (!response){
                console.log('賬號過期');
                #通知客戶端
                socket.emit('auth_to_login');
                //當然也可以使用 disconnect 斷開鏈接,如果是單頁應用做入,斷開后記得要重新建立連接
                //socket.on('disconnect', function() {});

            }else{
                 #通過API判斷
                 let result = request({
                    url: 'http://xx.com/user/check',
                    method: "POST",
                    json: true,
                    headers: {
                        "content-type": "application/json",
                        "charset":"UTF-8",
                    },
                    body: {token:token}
                }, function(error, response, body) {
                    if (!error && response.statusCode == 200) {
                        body = JSON.stringify(body) 
                        result =JSON.parse(body) 
                        if (result.code == 0){
                            #通知客戶端
                            socket.emit('auth_to_index');
                        }
                    }
                });
            }
        });
        return false;
    }
});
server.listen(httpPort); //用server連接

啟動socket服務器

執(zhí)行 node app.js

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末冒晰,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子竟块,更是在濱河造成了極大的恐慌壶运,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浪秘,死亡現(xiàn)場離奇詭異蒋情,居然都是意外死亡,警方通過查閱死者的電腦和手機耸携,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進店門棵癣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人夺衍,你說我怎么就攤上這事狈谊。” “怎么了沟沙?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵河劝,是天一觀的道長。 經(jīng)常有香客問我尝胆,道長丧裁,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任含衔,我火速辦了婚禮,結(jié)果婚禮上二庵,老公的妹妹穿的比我還像新娘贪染。我一直安慰自己,他們只是感情好催享,可當我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布杭隙。 她就那樣靜靜地躺著,像睡著了一般因妙。 火紅的嫁衣襯著肌膚如雪痰憎。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天攀涵,我揣著相機與錄音铣耘,去河邊找鬼。 笑死以故,一個胖子當著我的面吹牛蜗细,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼炉媒,長吁一口氣:“原來是場噩夢啊……” “哼踪区!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起吊骤,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤缎岗,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后白粉,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體传泊,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年蜗元,在試婚紗的時候發(fā)現(xiàn)自己被綠了或渤。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡奕扣,死狀恐怖薪鹦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情惯豆,我是刑警寧澤池磁,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站楷兽,受9級特大地震影響地熄,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜芯杀,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一端考、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧揭厚,春花似錦却特、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至太援,卻和暖如春闽晦,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背提岔。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工仙蛉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人唧垦。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓捅儒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子巧还,可洞房花燭夜當晚...
    茶點故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容