change sth

jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "experimentalDecorators": true,
     "target": "es5",
     "module": "esnext",
     "baseUrl": "./",
@@ -15,5 +16,9 @@
       "dom.iterable",
       "scripthost"
     ]
-  }
+  },
+  "vueCompilerOptions": {
+    "target": 2.7,
+    "experimentalDisableTemplateSupport": true,
+  },
 }

package.json

@@ -22,7 +22,8 @@
     "vue-clipboard2": "^0.3.3",
     "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "vuex-module-decorators": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -4,28 +4,12 @@
   </div>
 </template>
 <script>
+
 var jcchain = require("./chain/jcchain.js");
 window.jcchain = jcchain;
 window.chain = new jcchain.JCChain()
 export default {
-  methods: {
-    loadLocalData() {
-      let userInfo = localStorage.getItem('userinfo')
-      if (userInfo) {
-        try {
-          let userData = JSON.parse(userInfo)
-          this.account = userData.account;
-          this.$store.commit('updataAccount', userData.account);
-          console.log(this.$store.state.account)
-        } catch(err) {
-        }
-      }
-    },
-  },
-  mounted() {
-    console.log('app mounted')
-    this.loadLocalData();
-  }
+  
 }
 </script>
 <style lang="less">

src/main.js

@@ -1,24 +1,23 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import axios from 'axios';
-import VueClipBoard from 'vue-clipboard2'
-// 完整引入，main.js写入以下代码
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import axios from "axios";
+import VueClipBoard from "vue-clipboard2";
+import "@/permission";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
 import "@/assets/font/font.css";
-import infiniteScroll from 'vue-infinite-scroll'
-Vue.use(infiniteScroll)
+import infiniteScroll from "vue-infinite-scroll";
+Vue.use(infiniteScroll);
 Vue.prototype.$axios = axios;
-Vue.use(ElementUI)
-Vue.config.productionTip = false
+Vue.use(ElementUI);
+Vue.config.productionTip = false;
 
-
-Vue.use(VueClipBoard)
+Vue.use(VueClipBoard);
 
 new Vue({
   router,
   store,
-  render: h => h(App)
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount("#app");

src/permission.js

@@ -0,0 +1,42 @@
+import router from "./router/index";
+import { AppModule } from "./store/modules/app";
+
+const whiteList = ["/login", "/mobile.html"];
+const loadLocalData = function () {
+  let userInfo = localStorage.getItem("userinfo");
+  if (userInfo) {
+    try {
+      let userData = JSON.parse(userInfo);
+      AppModule.updateAccount(userData.account);
+      console.log(userData);
+    } catch (err) {}
+  }
+};
+loadLocalData();
+router.beforeEach((to, _, next) => {
+  // Determine whether the user has logged in
+  console.log(to);
+  if (AppModule.account) {
+    if (to.path === "/login") {
+      // If is logged in, redirect to the home page
+      next({ path: "/mobile.html" });
+    } else {
+      // Check whether the user has obtained his permission roles
+      next();
+    }
+  } else {
+    // Has no token
+    if (whiteList.indexOf(to.path) !== -1) {
+      // In the free login whitelist, go directly
+      next();
+    } else {
+      // Other pages that do not have permission to access are redirected to the login page.
+      next(`/login?redirect=${to.fullPath}`);
+    }
+  }
+});
+
+router.afterEach((to) => {
+  // set page title
+  document.title = to.meta.title;
+});

src/router/index.js

@@ -18,18 +18,21 @@ const routes = [
       {
         path: "/login",
         name: "login",
+        meta: { title: "login" },
         component: () =>
           import(/* webpackChunkName: "login" */ "../views/mobile/Login.vue"),
       },
       {
         path: "/signup",
         name: "Signup",
+        meta: { title: "Signup" },
         component: () =>
           import(/* webpackChunkName: "singup" */ "../views/mobile/Signup.vue"),
       },
       {
         path: "/recommend",
         name: "Recommend",
+        meta: { title: "Recommend" },
         component: () =>
           import(
             /* webpackChunkName: "recommend" */ "../views/mobile/Recommend.vue"
@@ -38,6 +41,7 @@ const routes = [
       {
         path: "/success",
         name: "Success",
+        meta: { title: "Success" },
         component: () =>
           import(
             /* webpackChunkName: "success" */ "../views/mobile/Success.vue"
@@ -46,6 +50,7 @@ const routes = [
       {
         path: "/rankinglist",
         name: "RankingList",
+        meta: { title: "Quest Info" },
         component: () =>
           import(
             /* webpackChunkName: "rankinglist" */ "../views/mobile/RankingList.vue"
@@ -54,6 +59,7 @@ const routes = [
       {
         path: "/listdetails",
         name: "ListDetails",
+        meta: { title: "Leader board" },
         component: () =>
           import(
             /* webpackChunkName: "listdetails" */ "../views/mobile/ListDetails.vue"

src/store/index.js

@@ -3,26 +3,4 @@ import Vuex from "vuex";
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
-  state() {
-    return {
-      account: "",
-      token: "",
-      status: 0,
-    };
-  },
-  getters: {},
-  mutations: {
-    updataAccount(state, _account) {
-      state.account = _account;
-    },
-    updataToken(state, _token) {
-      state.token = _token;
-    },
-    updateStatus(state, _state) {
-      state.status = _state;
-    },
-  },
-  actions: {},
-  modules: {},
-});
+export default new Vuex.Store({});

src/store/modules/app.js

@@ -0,0 +1,26 @@
+import {
+  VuexModule,
+  Module,
+  Mutation,
+  Action,
+  getModule,
+} from "vuex-module-decorators";
+
+import store from "@/store";
+
+@Module({ dynamic: true, store, name: "app" })
+class App extends VuexModule {
+  account = "";
+
+  @Mutation
+  SET_ACCOUNT(acc) {
+    this.account = acc;
+  }
+
+  @Action
+  updateAccount(acc) {
+    this.SET_ACCOUNT(acc);
+  }
+}
+
+export const AppModule = getModule(App);

src/views/layout/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="header">
-      <div class="logo-img">
+      <div class="logo-img" @click="toHome">
         <img class="imgs" src="../../assets/mobile/logo.png" alt="" />
       </div>
       <div class="header-login" @click="header">
@@ -24,9 +24,6 @@ export default {
     };
   },
   created() {
-    if (!this.$store.state.account && location.pathname.indexOf('login') == -1 ) {
-      location.href = '/desktop.html'
-    }
     chain.chainManager.init().then(() => {
       console.log("header wallet init");
     });
@@ -40,6 +37,9 @@ export default {
     header(){
        this.hide = true
     },
+    toHome() {
+      location.href = '/mobile.html'
+    },
     logout() {
       chain.logout();
       localStorage.removeItem('userinfo');

src/views/mobile/ListDetails.vue

@@ -50,6 +50,7 @@
 </template>
 
 <script>
+import { AppModule } from "@/store/modules/app";
 import infiniteScroll from "vue-infinite-scroll";
 export default {
   directives: { infiniteScroll },
@@ -74,7 +75,7 @@ export default {
     updateData() {
       this.$axios
         .post(process.env.VUE_APP_API_HOST + "/aa1/leaderboard", {
-          account: this.$store.state.account,
+          account: AppModule.account,
           offset: this.offset,
           limit: 10,
         })
@@ -89,12 +90,9 @@ export default {
     },
   },
   created() {
-    if (!this.$store.state.account) {
-      return
-    }
     this.$axios
       .post(process.env.VUE_APP_API_HOST + "/aa1/leaderboard", {
-        account: this.$store.state.account,
+        account: AppModule.account,
         offset: 0,
         limit: 10,
       })
@@ -108,7 +106,7 @@ export default {
       });
     this.$axios
       .post(process.env.VUE_APP_API_HOST + "/aa1/leaderboard_me", {
-        account: this.$store.state.account,
+        account: AppModule.account,
       })
       .then((res) => {
         console.log("成功", res.data);

src/views/mobile/Login.vue

@@ -23,6 +23,7 @@
 <script>
 
 
+import { AppModule } from "@/store/modules/app";
 import Header from "../layout/Header.vue";
 export default {
   components: {
@@ -37,6 +38,20 @@ export default {
       showWc: true
     };
   },
+  watch: { 
+    '$route': {
+      handler: function(route) {
+        const query = route.query
+        if (query) {
+          this.redirect = query.redirect
+          this.otherQuery = this.getOtherQuery(query)
+        }
+        console.log(this.redirect)
+        console.log(this.otherQuery)
+      },
+      immediate: true
+    }
+  },
   mounted() {
     this.hasMetamask = jcchain.hasMetamask()
     this.isMobile = jcchain.isMobile()
@@ -52,7 +67,6 @@ export default {
         window.dispatchEvent(event);
       }
     });
-    console.log(process.env.VUE_APP_API_HOST)
   },
   methods: {
     Login() {
@@ -68,22 +82,24 @@ export default {
         logined: this.chain.logined,
         token: this.chain.token,
       };
-      this.$store.commit('updataAccount', this.chain.account);
-      this.$store.commit('updataToken', this.chain.token);
+      AppModule.updateAccount(this.chain.account);
       window.localStorage.setItem("userinfo", JSON.stringify(userInfo));
-      let userinfo = window.localStorage.getItem("userinfo");
-      console.log(JSON.parse(userinfo) , "2022");
       window.logincb && window.logincb();
       window.logincb = undefined;
-      this.toggleLoginBtn();
-      window.onChainLogined && window.onChainLogined();
-      this.checkWalletBind();
       let event = new Event("account_ready", {
         bubbles: true,
         cancelable: false,
       });
       window.dispatchEvent(event);
-      this.$router.push("/signup");
+      if (!this.redirect) {
+        location.href = '/mobile.html'
+      } else {
+        this.$router.push({
+          path: this.redirect || '/mobile.html',
+          query: this.otherQuery
+        })
+      }
+      
     },
     chainLogin(cb) {
       window.logincb = cb;
@@ -96,9 +112,14 @@ export default {
     walletConnect() {
       this.chain.selectWalletAndLogin(2).then(this.logSuccess.bind(window));
     },
-    toggleLoginBtn() {},
-    checkWalletBind() {},
-    onChainLogined() {},
+    getOtherQuery(query) {
+      return Object.keys(query).reduce((acc, cur) => {
+        if (cur !== 'redirect') {
+          acc[cur] = query[cur]
+        }
+        return acc
+      }, {})
+    }
   },
 };
 </script>

src/views/mobile/RankingList.vue

@@ -171,6 +171,7 @@
 <script>
 import Footer from "../layout/Footer.vue";
 import Clipboard from "clipboard";
+import { AppModule } from "@/store/modules/app";
 export default {
   components: {
     Footer,
@@ -200,13 +201,11 @@ export default {
     };
   },
   created() {
-    if (!this.$store.state.account) {
-      return;
-    }
-    this.address = this.formatAddress(this.$store.state.account)
+
+    this.address = this.formatAddress(AppModule.account)
     this.$axios
       .post(process.env.VUE_APP_API_HOST + "/aa1/user_info", {
-        account: this.$store.state.account,
+        account: AppModule.account,
       })
       .then((res) => {
         console.log("success", res.data);
@@ -220,7 +219,7 @@ export default {
       });
     this.$axios
       .post(process.env.VUE_APP_API_HOST + "/aa1/list_event_log", {
-        account: this.$store.state.account,
+        account: AppModule.account,
       })
       .then((res) => {
         console.log("success", res.data);

src/views/mobile/Recommend.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import { AppModule } from '@/store/modules/app';
 import { Message } from 'element-ui';
 
 
@@ -37,7 +38,7 @@ export default {
     navigator() {
       this.$axios
         .post(process.env.VUE_APP_API_HOST + "/aa1/join", {
-          account: this.$store.state.account ,
+          account: AppModule.account ,
           invite_code: this.number,
         })
         .then((res) => {

src/views/mobile/Signup.vue

@@ -16,6 +16,7 @@
 
 <script>
 import {checkStatus} from '@/api/webapi'
+import { AppModule } from '@/store/modules/app';
 export default {
   data() {
     return {
@@ -38,13 +39,13 @@ export default {
       console.log("iframe load");
       setTimeout(() => {
         console.log("send wallet address to remote page");
-        self.sendAddressToIframe(self.$store.state.account);
+        self.sendAddressToIframe(AppModule.account);
       }, 1000);
     };
   },
   methods: {
     async checkStatus() {
-      let res = await checkStatus(this.$store.state.account)
+      let res = await checkStatus(AppModule.account)
       if (res.errcode) {
         return;
       }