fix: token lost

This commit is contained in:
wzdwc
2021-03-28 03:08:26 +08:00
parent f16496605c
commit c4eba7fe96
17 changed files with 352 additions and 235 deletions
+70 -64
View File
@@ -1,64 +1,70 @@
@font-face {
font-family: 'iconfont'; /* project id 1801313 */
src: url('//at.alicdn.com/t/font_1801313_4rcv94i1hxw.eot');
src: url('//at.alicdn.com/t/font_1801313_4rcv94i1hxw.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1801313_4rcv94i1hxw.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1801313_4rcv94i1hxw.woff') format('woff'),
url('//at.alicdn.com/t/font_1801313_4rcv94i1hxw.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1801313_4rcv94i1hxw.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-account:before {
content: "\e60a";
}
.icon-user-avatar:before {
content: "\e636";
}
.icon-pot:before {
content: "\e60c";
}
.icon-gold:before {
content: "\e609";
}
.icon-setting:before {
content: "\e611";
}
.icon-password:before {
content: "\e603";
}
.icon-close:before {
content: "\e615";
}
.icon-msg:before{
content: "\e781";
}
.icon-record:before{
content: "\e657";
}
.icon-arrow:before{
content: "\e623";
}
body, p,h1,h2,ul,li,input{
padding: 0;
margin: 0;
}
input{
border: 0;
outline: none;
}
@font-face {
font-family: 'iconfont'; /* project id 1801313 */
src: url('//at.alicdn.com/t/font_1801313_jpwi7jzmcwr.eot');
src: url('//at.alicdn.com/t/font_1801313_jpwi7jzmcwr.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1801313_jpwi7jzmcwr.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1801313_jpwi7jzmcwr.woff') format('woff'),
url('//at.alicdn.com/t/font_1801313_jpwi7jzmcwr.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1801313_jpwi7jzmcwr.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-account:before {
content: "\e60a";
}
.icon-user-avatar:before {
content: "\e636";
}
.icon-pot:before {
content: "\e60c";
}
.icon-gold:before {
content: "\e609";
}
.icon-setting:before {
content: "\e611";
}
.icon-password:before {
content: "\e603";
}
.icon-close:before {
content: "\e615";
}
.icon-msg:before{
content: "\e781";
}
.icon-record:before{
content: "\e657";
}
.icon-arrow:before{
content: "\e623";
}
.icon-clock:before{
content: "\e608";
}
body, p,h1,h2,ul,li,input{
padding: 0;
margin: 0;
}
input{
border: 0;
outline: none;
}
+37 -1
View File
@@ -60,6 +60,11 @@
<div class="hand-card">
<cardList :cardList="handCard"
:valueCards="valueCards"></cardList>
<div class="delay-time" v-show="time < 15 && sit.player.delayCount > 0
&& actionUserId === sit.player.userId" @click="delayTime">
<i class="iconfont icon-clock "></i>
<span>{{sit.player.delayCount}}</span>
</div>
</div>
<div class="ready"
v-show="handCard && handCard.length === 0">ready
@@ -159,6 +164,14 @@
return map(cards);
}
private delayTime() {
if(this.currPlayer.delayCount > 0) {
console.log('delay')
this.$emit('update:time', this.time + 60);
this.$emit('delay')
}
}
private sitDown(sit: ISit) {
if (!sit.player && (!this.isPlay || !this.hasSit)) {
if (this.currPlayer.counter <= 0) {
@@ -354,6 +367,29 @@
}
}
.delay-time{
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
min-width: 24vw;
min-height: 10vh;
background: radial-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0) 70%);
i{
color: #fff;
font-size: 30px;
}
span{
font-size: 12px;
color: #fff;
margin-left: 2px;
font-weight: 600;
}
}
.hand-card {
position: absolute;
top: 1vh;
@@ -464,7 +500,7 @@
color: #fff;
font-size: 14px;
bottom: -48px;
width: 60 / 3.75vw;
width: 22vw;
text-align: center;
font-weight: 700;
}
+20 -19
View File
@@ -1,19 +1,20 @@
enum PlayerType {
READY,
SIT_DOWN,
GAMING,
}
export interface IPlayer {
counter: number;
nickName: string;
actionSize: number;
actionCommand: string;
type: string;
userId?: number;
handCard?: string[];
buyIn: number;
status: number;
income?: number;
isSit: boolean;
}
enum PlayerType {
READY,
SIT_DOWN,
GAMING,
}
export interface IPlayer {
counter: number;
nickName: string;
actionSize: number;
actionCommand: string;
type: string;
userId?: string;
handCard?: string[];
buyIn: number;
status: number;
income?: number;
isSit: boolean;
delayCount: number;
}
+34 -34
View File
@@ -1,34 +1,34 @@
import axios, {AxiosRequestConfig, Method} from 'axios';
import cookie from 'js-cookie';
import origin from '@/utils/origin';
const request = async ({method = 'post' as Method, url = '', body = {}, timeout = 8000}) => {
if (!url) {
return Promise.reject('Request url is null!');
}
const token = cookie.get('token');
const headers = {
Authorization: `Bearer ${token}`,
};
console.log('url', origin.url);
url = `${origin.url}/node${url}`;
const option: AxiosRequestConfig = {
url,
method,
timeout,
data: body,
withCredentials: true,
headers,
};
try {
const result = await axios(option);
if (result.data.code === '000000') {
return result.data;
} else {
throw result.data;
}
} catch (e) {
throw e;
}
};
export default request;
import axios, {AxiosRequestConfig, Method} from 'axios';
import cookie from 'js-cookie';
import origin from '@/utils/origin';
const request = async ({method = 'post' as Method, url = '', body = {}, timeout = 8000}) => {
if (!url) {
return Promise.reject('Request url is null!');
}
const token = cookie.get('token') || localStorage.getItem('token');
const headers = {
Authorization: `Bearer ${token}`,
};
console.log('url', origin.url);
url = `${origin.url}/node${url}`;
const option: AxiosRequestConfig = {
url,
method,
timeout,
data: body,
withCredentials: true,
headers,
};
try {
const result = await axios(option);
if (result.data.code === '000000') {
return result.data;
} else {
throw result.data;
}
} catch (e) {
throw e;
}
};
export default request;
+20 -4
View File
@@ -8,7 +8,8 @@
:isPlay='isPlay'
:valueCards='valueCards'
:roomConfig = 'roomConfig'
:time='time'
@delay="delay"
:time.sync='time'
:winner="winner"
:actionUserId='actionUserId'
:hand-card="handCard"></sitList>
@@ -107,7 +108,7 @@
}
const GAME_BASE_SIZE = 1;
const ACTION_TIME = 60;
const ACTION_TIME = 30;
@Component({
components: {
@@ -306,6 +307,11 @@
this.emit('sitDown', { sitList: this.sitListMap() });
}
private delay() {
console.log('delay')
this.emit('delayTime');
}
private action(command: string) {
if (command === 'fold') {
clearTimeout(this.timeSt);
@@ -322,8 +328,8 @@
}
private socketInit() {
const token = cookie.get('token');
const roomConfig = cookie.get('roomConfig') || '';
const token = cookie.get('token') || localStorage.getItem('token') || '';
const roomConfig = cookie.get('roomConfig') || localStorage.getItem('roomConfig') || '';
const log = console.log;
this.roomConfig = JSON.parse(roomConfig);
console.log(JSON.parse(roomConfig), 'roomConfig');
@@ -445,6 +451,12 @@
this.init();
}
if (msg.action === 'delayTime') {
if (this.currPlayer?.userId !== this.actionUserId) {
this.time += 60;
}
}
if (msg.action === 'broadcast') {
this.messageList.push({
message: msg.message.msg || '',
@@ -455,14 +467,18 @@
// 系统事件
this.socket.on('disconnect', (msg: IMsg) => {
this.$plugin.toast('room is disconnect');
this.socketInit()
log('#disconnect', msg);
});
this.socket.on('disconnecting', () => {
this.$plugin.toast('room is disconnecting');
log('#disconnecting');
});
this.socket.on('error', () => {
this.$plugin.toast('room is error');
log('#error');
});
}
+1
View File
@@ -93,6 +93,7 @@
isShort: this.isShort,
smallBlind: this.smallBlind,
};
localStorage.setItem('roomConfig', JSON.stringify(roomConfig))
cookie.set('roomConfig', roomConfig, {expires: 1});
this.$router.push({ name: 'game', params: { roomNumber, isOwner: '1' } });
} catch (e) {
+89 -88
View File
@@ -1,88 +1,89 @@
<template>
<div class="login-container container">
<div class="login-body">
<div class="name">J-POKER</div>
<div class="user-name input-bd">
<div class="input-name iconfont icon-account"></div>
<div class="input-text">
<input type="text"
v-model="userAccount"/>
</div>
</div>
<div class="password input-bd">
<div class="input-name iconfont icon-password"></div>
<div class="input-text">
<input type="password"
v-model="password"/>
</div>
</div>
<div class="login-btn btn">
<span @click="login">sign in</span>
<b @click="signUp">sign up</b>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Vue} from 'vue-property-decorator';
import service from '../service';
import Component from 'vue-class-component';
import cookie from 'js-cookie';
@Component
export default class Login extends Vue {
public userAccount: string = '';
public password: string = '';
private signUp() {
this.$router.replace({name: 'register'});
return;
}
private async login() {
try {
const result = await service.login(this.userAccount, this.password);
const { token } = result.data;
cookie.set('token', token, {expires: 1});
await this.$router.push({name: 'home'});
} catch (e) {
this.$plugin.toast('Wrong password or account.');
}
}
}
</script>
<style lang="less" scoped>
.login-container{
background: radial-gradient(#00bf86, #006a55);
background-size: 100% 100%;
width: 100vw;
height: 100vh;
padding: 50vw 0;
box-sizing: border-box;
.login-body{
width: 85vw;
margin: auto;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.3);
background-color: #fff;
padding: 30px;
.input-bd{
border: 1px solid #bababa;
border-radius: 20px;
width: 60vw;
margin: 30px auto;
text-align: left;
.input-name{
text-align: center;
font-size: 18px;
color: #bababa;
}
input{
height: 40px;
background-color: transparent;
}
}
}
}
</style>
<template>
<div class="login-container container">
<div class="login-body">
<div class="name">J-POKER</div>
<div class="user-name input-bd">
<div class="input-name iconfont icon-account"></div>
<div class="input-text">
<input type="text"
v-model="userAccount"/>
</div>
</div>
<div class="password input-bd">
<div class="input-name iconfont icon-password"></div>
<div class="input-text">
<input type="password"
v-model="password"/>
</div>
</div>
<div class="login-btn btn">
<span @click="login">sign in</span>
<b @click="signUp">sign up</b>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Vue} from 'vue-property-decorator';
import service from '../service';
import Component from 'vue-class-component';
import cookie from 'js-cookie';
@Component
export default class Login extends Vue {
public userAccount: string = '';
public password: string = '';
private signUp() {
this.$router.replace({name: 'register'});
return;
}
private async login() {
try {
const result = await service.login(this.userAccount, this.password);
const { token } = result.data;
cookie.set('token', token, {expires: 1});
localStorage.setItem('token', token)
await this.$router.push({name: 'home'});
} catch (e) {
this.$plugin.toast('Wrong password or account.');
}
}
}
</script>
<style lang="less" scoped>
.login-container{
background: radial-gradient(#00bf86, #006a55);
background-size: 100% 100%;
width: 100vw;
height: 100vh;
padding: 50vw 0;
box-sizing: border-box;
.login-body{
width: 85vw;
margin: auto;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.3);
background-color: #fff;
padding: 30px;
.input-bd{
border: 1px solid #bababa;
border-radius: 20px;
width: 60vw;
margin: 30px auto;
text-align: left;
.input-name{
text-align: center;
font-size: 18px;
color: #bababa;
}
input{
height: 40px;
background-color: transparent;
}
}
}
}
</style>