Explorar o código

完善 login,增加 config

xy %!s(int64=7) %!d(string=hai) anos
pai
achega
44375698da

+ 22 - 1
README.md

@@ -1,2 +1,23 @@
-# online
+# online (workbench)
+### PORT
+* font-end -> 3999
+* faas-backend -> 8999
+* graphql -> 3000
 
+### URI
+* graphql-local: http://localhost:3000/ql
+* graphiql-local: http://localhost:3000/graphql
+* fc-tencent: http://service-28dm054z-1254337200.ap-shanghai.apigateway.myqcloud.com/release/graphql
+* graphiql-tencent: http://123.206.193.98:3000/ql
+
+### TODO
+* a lot, cannot list
+
+### Server
+1. Read 'readme' at 123.206.193.98/homw/ioobot/.
+2. Use 'pm2' and 'screen'
+
+### DEV
+1. git clone
+2. sudo cnpm install (cnpm is better)
+3. npm run start / yarn start

+ 127 - 10
src/components/common/config/Config.js

@@ -1,29 +1,146 @@
 import React, {Component} from 'react';
-import {Input} from 'antd';
+import {Button, Input, Spin} from 'antd';
 
+import {SHOW_CLOUD, ADD_CLOUD, UPDATE_CLOUD} from "../../gql";
+import {request} from 'graphql-request'
+
+// 需求:
+// 这个页面不应放在目录上
+// 检测用户是否有该字段
+// 如果没有,页面跳转到此
+
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
 
 class Config extends Component {
     constructor(props) {
         super(props);
         this.state = {
-
+            show: false,
+            tencentCLoudID: '',
+            tenID: '',
+            tenKey: '',
+            aliyunCLoudID: '',
+            aliID: '',
+            aliKey: '',
+            awsCLoudID: '',
+            awsID: '',
+            awsKey: ''
         };
+        request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: props.userID}).then(
+            data => {
+                let tencent = data.cloud_by_props.find(cloud => cloud.cloudName === 'tencent');
+                let aliyun = data.cloud_by_props.find(cloud => cloud.cloudName === 'aliyun');
+                let amazon = data.cloud_by_props.find(cloud => cloud.cloudName === 'amazon');
+                this.setState({
+                    show: true,
+                    tencentCLoudID: tencent ? tencent.id : '',
+                    tenID: tencent ? tencent.secretId : '',
+                    tenKey: tencent ? tencent.secretKey : '',
+                    aliyunCLoudID: aliyun ? aliyun.id : '',
+                    aliID: aliyun ? aliyun.secretId : '',
+                    aliKey: aliyun ? aliyun.secretKey : '',
+                    awsCLoudID: amazon ? amazon.id : '',
+                    awsID: amazon ? amazon.secretId : '',
+                    awsKey: amazon ? amazon.secretKey : ''
+                });
+            }
+        );
     }
 
+
+    inputChange = (kind) => {
+        return (e) => {
+            this.setState({
+                [kind]: e.target.value
+            })
+        }
+    };
+
+    submit = (id, cloudName, secretId, secretKey) => {
+        if (id === '') {
+            let varObj = {
+                id: idGen('cloud'),
+                user_id: this.props.userID,
+                appId: '',
+                cloudName,
+                secretId,
+                secretKey,
+                createdAt: new Date().getTime(),
+                updatedAt: ''
+            };
+            request('http://123.206.193.98:3000/graphql', ADD_CLOUD, varObj).then(
+                data => {
+                    // next...
+                    console.log('create');
+                    console.log(data);
+                }
+            );
+        } else {
+            let varObj = {
+                id,
+                secretId,
+                secretKey,
+                updatedAt: new Date().getTime()
+            };
+            request('http://123.206.193.98:3000/graphql', UPDATE_CLOUD, varObj).then(
+                data => {
+                    // next...
+                    console.log('update');
+                    console.log(data);
+                }
+            );
+        }
+    };
+
     render() {
         return (
-            <div>
-                <span className='cloud-name'>Tencent: </span>
-                <div style={{marginBottom: 15}}>
+            this.state.show ?
+                <div>
                     <div>
-                        ID: <Input style={{width: 250}} value={cloud.secretId}/>
-                        Key: <Input style={{width: 250}}
-                                    value={cloud.secretKey}/>
+                        <span className='cloud-name'>Tencent: </span>
+                        <div style={{marginBottom: 15}}>
+                            <div>
+                                ID: <Input style={{width: 250}} value={this.state.tenID}
+                                           onChange={this.inputChange('tenID')}/>
+                                Key: <Input style={{width: 250}} value={this.state.tenKey}
+                                            onChange={this.inputChange('tenKey')}/>
+                            </div>
+                            <Button type='primary' onClick={this.submit(this.state.tencentCLoudID ,'tencent', this.state.tenID, this.state.tenKey)}>ok</Button>
+                        </div>
+                    </div>
+                    <div>
+                        <span className='cloud-name'>Aliyun: </span>
+                        <div style={{marginBottom: 15}}>
+                            <div>
+                                ID: <Input style={{width: 250}} value={this.state.aliID}
+                                           onChange={this.inputChange('aliID')}/>
+                                Key: <Input style={{width: 250}} value={this.state.aliKey}
+                                            onChange={this.inputChange('aliKey')}/>
+                            </div>
+                            <Button type='primary' onClick={this.submit(this.state.aliyunCLoudID, 'aliyun', this.state.aliID, this.state.aliKey)}>ok</Button>
+                        </div>
+                    </div>
+                    <div>
+                        <span className='cloud-name'>AWS: </span>
+                        <div style={{marginBottom: 15}}>
+                            <div>
+                                ID: <Input style={{width: 250}} value={this.state.awsID}
+                                           onChange={this.inputChange('awsID')}/>
+                                Key: <Input style={{width: 250}} value={this.state.awsKey}
+                                            onChange={this.inputChange('awsKey')}/>
+                            </div>
+                            <Button type='primary' onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>ok</Button>
+                        </div>
                     </div>
                 </div>
-            </div>
+                :
+                <Spin style={{marginLeft: 3}}/>
         )
     }
 }
 
-export default Config;
+export default Config;
+
+

+ 4 - 3
src/components/common/deploy/Deploy.jsx

@@ -3,6 +3,7 @@ import {Row, Col, Input, Spin, Button} from 'antd';
 
 import {Mutation, Query} from "react-apollo";
 import {SHOW_CLOUD, SHOW_DEPLOY, SHOW_APIGWGROUP} from "../../gql";
+import gql from "graphql-tag";
 import './index.css';
 import TencentDeploy from './tencent/TencentDeploy';
 import TencentAPIGroup from './tencent/TencentAPIGroup';
@@ -52,7 +53,7 @@ class Deploy extends Component {
             <div>
                 {
                     this.state.show === 'all' ?
-                        <Query query={SHOW_CLOUD} variables={{user_id: userID}}>
+                        <Query query={gql(SHOW_CLOUD)} variables={{user_id: userID}}>
                             {
                                 ({loading, error, data}) => {
                                     if (loading) {
@@ -76,7 +77,7 @@ class Deploy extends Component {
                                                 <Row>
                                                     <Col span={12}>
                                                         <b>DEPLOY</b>
-                                                        <Query query={SHOW_DEPLOY} variables={{cloud_id: cloud.id}}>
+                                                        <Query query={gql(SHOW_DEPLOY)} variables={{cloud_id: cloud.id}}>
                                                             {
                                                                 ({loading, error, data}) => {
                                                                     if (loading) {
@@ -104,7 +105,7 @@ class Deploy extends Component {
                                                     </Col>
                                                     <Col span={12}>
                                                         <b>API</b>
-                                                        <Query query={SHOW_APIGWGROUP} variables={{cloud_id: cloud.id}}>
+                                                        <Query query={gql(SHOW_APIGWGROUP)} variables={{cloud_id: cloud.id}}>
                                                             {
                                                                 ({loading, error, data}) => {
                                                                     if (loading) {

+ 9 - 8
src/components/common/schema/Schema.jsx

@@ -4,6 +4,7 @@ import {Row, Col, Input, Icon, Button, Spin} from 'antd';
 import './index.css';
 import SchemaChange from './change/SchemaChange';
 import {Mutation, Query} from "react-apollo";
+import gql from "graphql-tag";
 import {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
 
 const Search = Input.Search;
@@ -69,7 +70,7 @@ class Schema extends Component {
                                     userID={userID}
                                     schemaID={this.state.schemaID}
                                 /> :
-                                <Query query={SHOW_TABLE}
+                                <Query query={gql(SHOW_TABLE)}
                                        variables={{schema_id: this.state.schemaID}}>
                                     {
                                         ({loading, error, data}) => {
@@ -121,12 +122,12 @@ class AddSchemaInput extends Component {
 
         return (
             <Mutation
-                mutation={ADD_SCHEMA}
+                mutation={gql(ADD_SCHEMA)}
                 update={(cache, {data: {create_schema}}) => {
-                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: userID}});
+                    let data = cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}});
                     data.schema_by_props.push(create_schema);
                     cache.writeQuery({
-                        query: SHOW_SCHEMA,
+                        query: gql(SHOW_SCHEMA),
                         variables: {user_id: userID},
                         data
                     });
@@ -169,7 +170,7 @@ class ShowSchemaList extends Component {
     render() {
         let userID = this.props.userID;
         return (
-            <Query query={SHOW_SCHEMA} variables={{user_id: userID}}>
+            <Query query={gql(SHOW_SCHEMA)} variables={{user_id: userID}}>
 
                 {
                     ({loading, error, data}) => {
@@ -246,13 +247,13 @@ class DeleteSchemaButton extends Component {
         let userID = this.props.userID;
         return (
             <Mutation
-                mutation={DELETE_SCHEMA}
+                mutation={gql(DELETE_SCHEMA)}
                 update={(cache) => {
-                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: userID}});
+                    let data = cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}});
 
                     data.schema_by_props.splice(data.schema_by_props.findIndex(obj => obj.schemaName === this.state.schemaName), 1);
                     cache.writeQuery({
-                        query: SHOW_SCHEMA,
+                        query: gql(SHOW_SCHEMA),
                         variables: {user_id: userID},
                         data
                     });

+ 13 - 12
src/components/common/schema/change/SchemaChange.jsx

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 
 import {Select, Input, Icon, Button, notification, Spin} from 'antd';
 import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../../gql";
+import gql from "graphql-tag";
 
 import {Mutation, Query} from "react-apollo";
 
@@ -205,7 +206,7 @@ class UpdateTableButton extends Component {
         };
 
         return (
-            <Query query={SHOW_TABLE} variables={{schema_id: schemaID}}>
+            <Query query={gql(SHOW_TABLE)} variables={{schema_id: schemaID}}>
 
                 {
                     ({loading, error, data}) => {
@@ -218,17 +219,17 @@ class UpdateTableButton extends Component {
 
                         return (
                             <Mutation
-                                mutation={UPDATE_SCHEMA}
+                                mutation={gql(UPDATE_SCHEMA)}
                                 update={(cache, {data: {update_schema}}) => {
                                     let data = cache.readQuery({
-                                        query: SHOW_TABLE,
+                                        query: gql(SHOW_TABLE),
                                         variables: {schema_id: schemaID}
                                     });
 
                                     data.schema_by_id = update_schema;
 
                                     let showSchemaData = cache.readQuery({
-                                        query: SHOW_SCHEMA,
+                                        query: gql(SHOW_SCHEMA),
                                         variables: {user_id: userID}
                                     });
 
@@ -237,12 +238,12 @@ class UpdateTableButton extends Component {
 
                                     cache.writeQuery(
                                         {
-                                            query: SHOW_TABLE,
+                                            query: gql(SHOW_TABLE),
                                             variables: {schema_id: schemaID},
                                             data
                                         },
                                         {
-                                            query: SHOW_SCHEMA,
+                                            query: gql(SHOW_SCHEMA),
                                             variables: {user_id: userID},
                                             showSchemaData
                                         }
@@ -322,7 +323,7 @@ class DeleteTableButton extends Component {
         };
 
         return (
-            <Query query={SHOW_TABLE} variables={{schema_id: schemaID}}>
+            <Query query={gql(SHOW_TABLE)} variables={{schema_id: schemaID}}>
 
                 {
                     ({loading, error, data}) => {
@@ -335,16 +336,16 @@ class DeleteTableButton extends Component {
 
                         return (
                             <Mutation
-                                mutation={UPDATE_SCHEMA}
+                                mutation={gql(UPDATE_SCHEMA)}
                                 update={(cache, {data: {update_schema}}) => {
                                     let data = cache.readQuery({
-                                        query: SHOW_TABLE,
+                                        query: gql(SHOW_TABLE),
                                         variables: {schema_id: schemaID}
                                     });
                                     data.schema_by_id = update_schema;
 
                                     let showSchemaData = cache.readQuery({
-                                        query: SHOW_SCHEMA,
+                                        query: gql(SHOW_SCHEMA),
                                         variables: {user_id: userID}
                                     });
                                     let schemas = showSchemaData.schema_by_props;
@@ -367,12 +368,12 @@ class DeleteTableButton extends Component {
 
                                     cache.writeQuery(
                                         {
-                                            query: SHOW_TABLE,
+                                            query: gql(SHOW_TABLE),
                                             variables: {schema_id: schemaID},
                                             data
                                         },
                                         {
-                                            query: SHOW_SCHEMA,
+                                            query: gql(SHOW_SCHEMA),
                                             variables: {user_id: userID},
                                             showSchemaData
                                         }

+ 69 - 13
src/components/gql.js

@@ -1,6 +1,9 @@
-import gql from "graphql-tag";
+// 注意是否使用 gql
+// apollo client 需要使用 gql
+// graphql-request 不需要使用 gql
+// import gql from "graphql-tag";
 
-const GET_USER = gql`
+const GET_USER = `
             query USER($id: ID!) {
                 user_by_id(id: $id) {
                     nickname
@@ -9,7 +12,15 @@ const GET_USER = gql`
             }
         `;
 
-const ADD_USER = gql`
+const SEARCH_USER = `
+        query USER($username: String) {
+                user_by_props(username: $username) {
+                    username
+                }
+            }
+        `;
+
+const ADD_USER = `
             mutation USER($email: String, $updatedAt: String, $password: String, $telephone: String, $nickname: String, $username: String, $createdAt: String, $openid: String, $id: ID!, $avatar: String) {
                 create_user(
                     email: $email 
@@ -38,7 +49,7 @@ const ADD_USER = gql`
 
         `;
 
-const SHOW_SCHEMA = gql`
+const SHOW_SCHEMA = `
             query SCHEMA($user_id: ID) {
                 schema_by_props(user_id: $user_id) {
                     schemaData
@@ -48,7 +59,7 @@ const SHOW_SCHEMA = gql`
             }
         `;
 
-const ADD_SCHEMA = gql`
+const ADD_SCHEMA = `
             mutation SCHEMA($id: ID!, $user_id: ID!, $schemaName: String!, $schemaData: String!, $createdAt: String, $updatedAt: String, $schemaState: String, $reference: String) {
                 create_schema(
                     id: $id,
@@ -67,13 +78,13 @@ const ADD_SCHEMA = gql`
             }
         `;
 
-const DELETE_SCHEMA = gql`
+const DELETE_SCHEMA = `
             mutation SCHEMA($schemaName: String) {
                 delete_schema(schemaName: $schemaName)
             }
         `;
 
-const UPDATE_SCHEMA = gql`
+const UPDATE_SCHEMA = `
             mutation SCHEMA($id: ID!, $schemaData: String!, $updatedAt: String, $schemaState: String) {
                 update_schema(
                     id: $id,
@@ -89,7 +100,7 @@ const UPDATE_SCHEMA = gql`
         `;
 
 
-const SHOW_TABLE = gql`
+const SHOW_TABLE = `
             query TABLE($schema_id: ID!) {
                 schema_by_id(id: $schema_id) {
                     schemaData
@@ -97,7 +108,24 @@ const SHOW_TABLE = gql`
             }
         `;
 
-const SHOW_CLOUD = gql`
+const ADD_CLOUD = `
+        mutation CLOUD($id: ID!, $user_id: ID, $cloudName: String, $secretId: String, $secretKey: String, $updatedAt: String, $createdAt: String, $appId: String) {
+            create_cloud(
+                id: $id 
+                user_id: $user_id 
+                cloudName: $cloudName 
+                secretId: $secretId 
+                secretKey: $secretKey 
+                createdAt: $createdAt 
+                updatedAt: $updatedAt
+                appId: $appId 
+            ) {
+                id
+            }
+        }
+    `;
+
+const SHOW_CLOUD = `
             query CLOUD($user_id: ID!) {
                 cloud_by_props(user_id: $user_id) {
                     id
@@ -108,8 +136,21 @@ const SHOW_CLOUD = gql`
             }
         `;
 
+const UPDATE_CLOUD = `
+        mutation updatecloud($id: ID, $secretId: String, $secretKey: String $updatedAt: String) {
+            update_cloud(
+                id: $id 
+                secretId: $secretId 
+                secretKey: $secretKey  
+                updatedAt: $updatedAt
+            ) {
+                id
+            }
+        }
+    `;
+
 
-const SHOW_DEPLOY = gql`
+const SHOW_DEPLOY = `
             query DEPLOY($cloud_id: ID!) {
                 deploy_by_props(cloud_id: $cloud_id) {
                     id
@@ -128,7 +169,7 @@ const SHOW_DEPLOY = gql`
             }
         `;
 
-const SHOW_APIGWGROUP = gql`
+const SHOW_APIGWGROUP = `
             query GROUP($cloud_id: ID!) {
                 apiGWGroup_by_props(cloud_id: $cloud_id) {
                     id
@@ -142,7 +183,7 @@ const SHOW_APIGWGROUP = gql`
             }
         `;
 
-const SHOW_APIGWPATH = gql`
+const SHOW_APIGWPATH = `
             query PATH($apiGWGroup_id: ID!) {
                 apiGWPath_by_props(apiGWGroup_id: $apiGWGroup_id) {
                     id
@@ -154,4 +195,19 @@ const SHOW_APIGWPATH = gql`
         `;
 
 
-export {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, UPDATE_SCHEMA, SHOW_TABLE, SHOW_CLOUD, SHOW_DEPLOY, SHOW_APIGWGROUP, SHOW_APIGWPATH, GET_USER, ADD_USER}
+export {
+    ADD_SCHEMA,
+    SHOW_SCHEMA,
+    UPDATE_SCHEMA,
+    DELETE_SCHEMA,
+    SHOW_TABLE,
+    ADD_CLOUD,
+    SHOW_CLOUD,
+    UPDATE_CLOUD,
+    SHOW_DEPLOY,
+    SHOW_APIGWGROUP,
+    SHOW_APIGWPATH,
+    ADD_USER,
+    GET_USER,
+    SEARCH_USER
+}

+ 71 - 45
src/components/login/login.js

@@ -2,10 +2,13 @@ import React, {Component} from 'react';
 
 import {Layout, Input, Button, Spin} from 'antd';
 
-import {ADD_USER, GET_USER} from "../gql";
+import {ADD_USER, GET_USER, SEARCH_USER} from "../gql";
 import {Mutation} from "react-apollo";
 import axios from 'axios';
 import {request} from 'graphql-request'
+import gql from "graphql-tag";
+import cookie from 'react-cookies'
+import _ from 'lodash';
 
 axios.defaults.withCredentials = true;
 
@@ -33,7 +36,8 @@ class Login extends Component {
             register_url: 'http://localhost:8999/resetpassword',
             getID_url: 'http://localhost:8999/getuserid',
             loginStatus: '',
-            loginOnce: true
+            loginOnce: true,
+            usernameTip: false
         }
     }
 
@@ -58,12 +62,13 @@ class Login extends Component {
 
     register = () => {
         return (
-            <Mutation mutation={ADD_USER}>
+            <Mutation mutation={gql(ADD_USER)}>
                 {(create_user, {loading, error}) => {
                     if (error)
                         return 'error';
                     if (loading)
                         return <Spin style={{marginLeft: 3}}/>;
+
                     return (
                         <div>
                             <span style={{marginRight: 20}}><b>register:</b></span>
@@ -75,9 +80,16 @@ class Login extends Component {
                                         // antd 获取不到 target,百度来的下面这句代码
                                         e.persist();
                                         this.setState({register_username: e.target.value});
+
                                     }}
                                     style={{width: 200}}
                                 />
+                                {
+                                    this.state.usernameTip?
+                                        <span><b>username has been used!</b></span>
+                                        :
+                                        ''
+                                }
                             </div>
                             <div style={{marginTop: 10}}>
                                 <span>password: </span>
@@ -92,36 +104,45 @@ class Login extends Component {
                                 />
                             </div>
                             <Button type='primary' onClick={() => {
-                                // 没做 username 查询
-                                // request('http://123.206.193.98:3000/graphql', GET_USER).then(data =>
-                                //     console.log(data)
-                                // );
-                                let id = idGen('userID');
-                                let _this = this;
-                                create_user({
-                                    variables: {
-                                        id,
-                                        email: '',
-                                        updatedAt: '',
-                                        password: '',
-                                        telephone: '',
-                                        nickname: '',
-                                        username: this.state.register_username,
-                                        createdAt: new Date().getTime(),
-                                        openid: '',
-                                        avatar: ''
+                                request('http://123.206.193.98:3000/graphql', SEARCH_USER, {username: this.state.register_username}).then(data => {
+                                    if (data.user_by_props.length === 0) {
+                                        let id = idGen('userID');
+                                        let _this = this;
+                                        create_user({
+                                            variables: {
+                                                id,
+                                                email: '',
+                                                updatedAt: '',
+                                                password: '',
+                                                telephone: '',
+                                                nickname: '',
+                                                username: this.state.register_username,
+                                                createdAt: new Date().getTime(),
+                                                openid: '',
+                                                avatar: ''
+                                            }
+                                        });
+                                        axios.get(`${this.state.register_url}?user-id=${id}&password=${this.state.register_password}&token=WXgraphql4Io`)
+                                            .then(function (response) {
+                                                if (response.status === 200)
+                                                    _this.setState({
+                                                        hasRegister: true
+                                                    })
+                                            })
+                                            .catch(function (error) {
+                                                console.log(error);
+                                            });
+                                    } else {
+                                        this.setState({
+                                            usernameTip: true
+                                        });
+                                        setTimeout(()=>{
+                                            this.setState({
+                                                usernameTip: false
+                                            });
+                                        }, 1500)
                                     }
                                 });
-                                axios.get(`${this.state.register_url}?user-id=${id}&password=${this.state.register_password}&token=WXgraphql4Io`)
-                                    .then(function (response) {
-                                        if (response.status === 200)
-                                            _this.setState({
-                                                hasRegister: true
-                                            })
-                                    })
-                                    .catch(function (error) {
-                                        console.log(error);
-                                    });
 
                             }}>ok</Button>
                         </div>
@@ -139,18 +160,21 @@ class Login extends Component {
                 if (res.data !== '') {
                     console.log(res);
                     _this.setState({
-                        userID: res.data,
-                        hasLogin: true,
-                        loginOnce: false,
-                        loginStatus: 'logined'
-                    },
-                        // 这里不知道为啥一直报错CORS
-                        // 存进 state 的 nickename 和 avatar 等
-                    //     () => {
-                    //     request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data =>
-                    //         console.log(data)
-                    //     )
-                    // }
+                            userID: res.data,
+                            hasLogin: true,
+                            loginOnce: false,
+                            loginStatus: 'logined'
+                        }, () => {
+                            request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
+                                    this.setState({
+                                        user: {
+                                            avatar: data.user_by_id.avatar,
+                                            nickname: data.user_by_id.nickname
+                                        }
+                                    })
+                                }
+                            )
+                        }
                     )
                 }
             })
@@ -210,13 +234,15 @@ class Login extends Component {
                                     {
                                         this.state.loginStatus === 'logined' ?
                                             <div>
-                                                <span style={{marginRight: '10px'}}>welcome, {this.state.user.nickname}</span>
+                                                <span
+                                                    style={{marginRight: '10px'}}>welcome, {this.state.user.nickname}</span>
                                                 <Button onClick={() => {
                                                     this.setState({
                                                         hasLogin: false,
                                                         loginStatus: '',
                                                         loginOnce: true
-                                                    })
+                                                    });
+                                                    // cookie.remove('ring-session')
                                                 }}>exit</Button>
                                             </div>
                                             :