client/src/router.js

   1 import Vue from "vue";
   2 import Router from "vue-router";
   3 import Hall from "./views/Hall.vue";
   4
   5 Vue.use(Router);
   6
   7 function loadView(view) {
   8     return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
   9 }
  10
  11 import { ajax } from "@/utils/ajax";
  12 import { store } from "@/store";
  13
  14 const router = new Router({
  15   routes: [
  16     {
  17       path: "/",
  18       name: "hall",
  19       component: Hall,
  20     },
  21     {
  22       path: "/variants",
  23       name: "variants",
  24       component: loadView("Variants"),
  25     },
  26     {
  27       path: "/variants/:vname([a-zA-Z0-9]+)",
  28       name: "rules",
  29       component: loadView("Rules"),
  30     },
  31     {
  32       path: "/authenticate/:token",
  33       name: "authenticate",
  34       beforeEnter: (to, from, next) => {
  35         ajax(
  36           "/authenticate",
  37           "GET",
  38           {token: to.params["token"]},
  39           (res) => {
  40             if (!res.errmsg) //if not already logged in
  41             {
  42               store.state.user.id = res.id;
  43               store.state.user.name = res.name;
  44               store.state.user.email = res.email;
  45               store.state.user.notify = res.notify;
  46               localStorage["myname"] = res.name;
  47               localStorage["myid"] = res.id;
  48             }
  49                         // TODO: I don't like these 2 lines, "next('/')" should be enough
  50                         window.location = "/";
  51             next();
  52           }
  53         );
  54       },
  55       component: Hall,
  56       //redirect: "/", //problem: redirection before end of AJAX request
  57     },
  58     {
  59       path: "/mygames",
  60       name: "mygames",
  61       component: loadView("MyGames"),
  62     },
  63     {
  64       path: "/game/:id",
  65       name: "game",
  66       component: loadView("Game"),
  67     },
  68     {
  69       path: "/analyze/:vname([a-zA-Z0-9]+)",
  70       name: "analyze",
  71       component: loadView("Game"),
  72     },
  73     {
  74       path: "/about",
  75       name: "about",
  76       component: loadView("About"),
  77     },
  78   ]
  79 });
  80
  81 router.beforeEach((to, from, next) => {
  82   window.scrollTo(0, 0);
  83   if (!!store.state.conn) //uninitialized at first page
  84   {
  85     // Notify WebSockets server (TODO: path or fullPath?)
  86     store.state.conn.send(JSON.stringify({code: "pagechange", page: to.path}));
  87   }
  88   next();
  89   // TODO?: redirect to current game (through GameStorage.getCurrent()) if any?
  90   // (and if the URL doesn't already match it) (use next("/game/GID"))
  91   //https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
  92 });
  93
  94 export default router;