修改登录流程

src/components/index/DesktopHeader.vue

@@ -12,10 +12,10 @@
       <li :class="{'active': currentSection === 'roadmap'}"><a href="/roadmap">Roadmap</a></li>
     </ul>
     <div class="right-part">
-      <div class="login-btn" v-if="!accountId" @click="collectToWallet">
+      <div class="login-btn" v-if="!logined" @click="collectToWallet">
         <img src="@/assets/202202/loginbutton@2x.png" alt="login"/>
       </div>
-      <div class="login-btn" v-if="accountId" @click="disconnectWallet">
+      <div class="login-btn" v-if="logined" @click="disconnectWallet">
         Logout
       </div>
       <div class="market-btn" @click="comingSoon">
@@ -30,7 +30,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Message } from 'element-ui'
 import { AppModule } from '@/store/modules/app'
 import { BlockChain } from '@/utils/blockchain'
-import { loginWithSign } from '@/utils/login'
+import { UserModule } from '@/store/modules/user'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -62,11 +62,15 @@ export default class extends Vue {
 
   async collectToWallet() {
     await this.bc.connect()
-    await loginWithSign(this.bc, AppModule.accountId, AppModule.chainId)
+    await UserModule.Login({
+      bcInstance: this.bc,
+      account: AppModule.accountId,
+      chainId: AppModule.chainId
+    })
   }
 
-  toggleDrop() {
-    this.dropShow = !this.dropShow
+  get logined() {
+    return !!UserModule.token
   }
 
   get accountId() {

src/components/main/MainHeader.vue

@@ -24,7 +24,7 @@
 <!--        <li data-menuanchor="chip"  @click="changeSection"  :class="{'active': currentSection === 'chip'}">-->
 <!--          <a href="#chip_section">Chip</a>-->
 <!--        </li>-->
-        <li v-if="accountId">
+        <li v-if="logined">
           <a href="mynft" >Mine</a>
         </li>
         <li data-menuanchor="market" @click.stop="comingSoon">
@@ -49,16 +49,16 @@
 <!--        <li data-menuanchor="chip"  @click="changeSection"  :class="{'active': currentSection === 'chip'}">-->
 <!--          <a href="#chip_section">CHIP</a>-->
 <!--        </li>-->
-        <li v-if="accountId">
+        <li v-if="logined">
           <a href="mynft" >Mine</a>
         </li>
         <li data-menuanchor="market" @click.stop="comingSoon">
           <a href="javascript:void(0)">MARKETPLACE</a>
         </li>
-        <li v-if="accountId" @click.stop="disconnectWallet">
+        <li v-if="logined" @click.stop="disconnectWallet">
           <a href="javascript:void(0)" >Logout</a>
         </li>
-        <li v-if="!accountId" @click="collectToWallet">
+        <li v-if="!logined" @click="collectToWallet">
           <a href="javascript:void(0)" >Connect Wallet</a>
         </li>
       </ul>
@@ -71,6 +71,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Message } from 'element-ui'
 import { AppModule } from '@/store/modules/app'
 import { BlockChain } from '@/utils/blockchain'
+import { UserModule } from '@/store/modules/user'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -101,7 +102,16 @@ export default class extends Vue {
   }
 
   async collectToWallet() {
-    return this.bc.connect()
+    await this.bc.connect()
+    await UserModule.Login({
+      bcInstance: this.bc,
+      account: AppModule.accountId,
+      chainId: AppModule.chainId
+    })
+  }
+
+  get logined() {
+    return !!UserModule.token
   }
 
   toggleDrop() {

src/components/mobile/main/MobileHeader.vue

@@ -29,6 +29,7 @@ import { Message } from 'element-ui'
 import { BlockChain } from '@/utils/blockchain'
 import { loginWithSign } from '@/utils/login'
 import { AppModule } from '@/store/modules/app'
+import { UserModule } from '@/store/modules/user'
 
 @Component({
   name: 'MobileHeader',
@@ -66,7 +67,16 @@ export default class MobileHeader extends Vue {
 
   async collectToWallet() {
     await this.bc.connect()
-    await loginWithSign(this.bc, AppModule.accountId, AppModule.chainId)
+    console.log(`AppModule.accountId: ${AppModule.accountId}, chainId: ${AppModule.chainId}`)
+    await UserModule.Login({
+      bcInstance: this.bc,
+      account: AppModule.accountId,
+      chainId: AppModule.chainId
+    })
+  }
+
+  get logined() {
+    return !!UserModule.token
   }
 
   get accountId() {

src/store/modules/user.ts

@@ -6,9 +6,14 @@ import {
   VuexModule
 } from 'vuex-module-decorators'
 import { getToken, removeToken, setToken } from '@/utils/cookies'
-import { getUserInfo, login, logout } from '@/api/User'
+import { getNonce, getUserInfo, login } from '@/api/User'
 import store from '@/store'
 
+const EIP721_DOMAIN_DATA = [
+  { name: 'name', type: 'string' },
+  { name: 'version', type: 'string' }
+]
+
 export interface IUserState {
   token: string
   name: string
@@ -36,12 +41,42 @@ class User extends VuexModule implements IUserState {
   public account = ''
 
   @Action
-  public async Login(userInfo: { username: string, password: string }) {
-    let { username, password } = userInfo
-    username = username.trim()
-    const { data } = await login({ username, password })
-    setToken(data.token)
-    this.SET_TOKEN(data.token)
+  public async Login({ bcInstance, account, chainId }: {bcInstance: any, account: string, chainId: string | number}) {
+    chainId += ''
+    const preRequest: any = await getNonce({ account, net_id: chainId })
+    const tips = 'This signature is only used for verify your account'
+    const signMsg = {
+      tips,
+      nonce: preRequest.nonce + ''
+    }
+
+    const signObj = {
+      types: {
+        EIP712Domain: EIP721_DOMAIN_DATA,
+        set: [
+          { name: 'tips', type: 'string' },
+          { name: 'nonce', type: 'string' }
+        ]
+      },
+      primaryType: 'set',
+      domain: {
+        name: 'Auth',
+        version: '1'
+      },
+      message: signMsg
+    }
+    const signature = await bcInstance.signData(signObj, account)
+    const authData = {
+      account,
+      nonce: preRequest.nonce,
+      signature,
+      tips,
+      net_id: chainId
+    }
+    console.log('login data: ', authData)
+    const res: any = await login(authData)
+    setToken(res.token)
+    this.SET_TOKEN(res.token)
   }
 
   @Action
@@ -82,7 +117,7 @@ class User extends VuexModule implements IUserState {
     if (this.token === '') {
       throw Error('LogOut: token is undefined!')
     }
-    await logout()
+    // await logout()
     removeToken()
     this.SET_TOKEN('')
     this.SET_ROLES([])
@@ -146,6 +181,10 @@ class User extends VuexModule implements IUserState {
     }
     this.permissions = results
   }
+
+  get encodeToken() {
+    return encodeURIComponent(this.token)
+  }
 }
 
 export const UserModule = getModule(User)

src/utils/blockchain.ts

@@ -6,6 +6,7 @@ import Web3 from 'web3'
 import { MessageBox } from 'element-ui'
 import { ERC20ABI, MALL_ADDRESS } from '@/utils/config_chain'
 import { EventBus, NEED_LOGIN } from '@/utils/event-bus'
+import { UserModule } from '@/store/modules/user'
 
 const EIP721_DOMAIN_DATA = [
   { name: 'name', type: 'string' },
@@ -87,13 +88,14 @@ export class BlockChain {
           return this.disconnect()
         }
       }
-      console.log('chainId: ', chainId)
-      console.log('accountsLogin: ', accounts)
       if (accounts && accounts.length > 0) {
         AppModule.updateAccount(accounts[0])
       }
 
       AppModule.updateWalletStatus(true)
+      console.log('chainId: ', chainId)
+      console.log('accountsLogin: ', accounts, AppModule.accountId)
+      return { account: accounts[0], chainId }
     } catch (err) {
     }
   }
@@ -118,6 +120,7 @@ export class BlockChain {
 
   public async disconnect() {
     try {
+      await UserModule.LogOut()
       await this.provider?.disconnect()
     } catch (err) {
     }

src/utils/cookies.ts

@@ -14,6 +14,6 @@ export const setMini = (mini: string) => Cookies.set(miniKey, mini)
 
 // User
 const tokenKey = 'vue_typescript_access_token'
-export const getToken = () => Cookies.get(tokenKey)
-export const setToken = (token: string) => Cookies.set(tokenKey, token)
-export const removeToken = () => Cookies.remove(tokenKey)
+export const getToken = () => localStorage.getItem(tokenKey)
+export const setToken = (token: string) => localStorage.setItem(tokenKey, token)
+export const removeToken = () => localStorage.removeItem(tokenKey)

src/utils/request.ts

@@ -12,7 +12,13 @@ service.interceptors.request.use(
   (config) => {
     // Add X-Access-Token header to every request, you can add other custom headers here
     if (UserModule.token) {
-      config.headers.authorization = 'Bearer ' + UserModule.token
+      if (config.url) {
+        if (config.url.indexOf('?') > 0) {
+          config.url += `&token=${UserModule.encodeToken}`
+        } else {
+          config.url += `?token=${UserModule.encodeToken}`
+        }
+      }
     }
     config.headers['Content-Type'] = 'application/json'
     return config