---
# System prepended metadata

title: CodeReview(10/20)

---

## CODE REVIEW (針對總後台與代理後台)

### 1. 登入頁/忘記密碼 頁面切換: 

[說明]  

原本我是用link href 用相對路徑去切換
```
<el-link href="/forget-password">忘記密碼</el-link>
```
但是由於總後台與代理後台的網址 是  `根目錄/efinity_dashboard`  導致在切換路徑時 少了
`efinity_dashboard`

後來調整成 this.$router.push({ path: "/forget-password" })

-----------------
另外為了本地叫好測試出測試站的路徑狀況, 我修改vue.config.js `publicPath` 讓本地呈現`http://192.168.8.200:8080/efinity_dashboard/#/forget-password` 

但是由於少了判斷總後台/代理後台不同path,  導致代理後台路徑不對, 這部分需要注意!
![](https://hackmd.io/_uploads/rk3PHsCWa.png)



### 2. 在開發時  有時候需要有formatter 的函式
 ![](https://hackmd.io/_uploads/HJCQLj0ZT.png)
 
 但是在**vue2** 要引用寫好的function時 ,  直接import 後的function 是無法直接使用的, 必須透過computed, 宣告過才能在template上使用
```js
import { ACTION_TYPE, actionTypeFormat } from "@/utils/common.js";
```
```js
  computed: {
    ACTION_TYPE() {
      return ACTION_TYPE;
    },
    actionTypeFormat() {
      return actionTypeFormat;
    },
    filterStartDate() {
      return this.filetDateRange.length ? this.filetDateRange[0] : null;
    },
    filterEndDate() {
      return this.filetDateRange.length ? this.filetDateRange[1] : null;
    },
  },
```

但是**vue3** 是無需這樣做~
![](https://hackmd.io/_uploads/rkkEdsR-a.png)

直接引用後, 便可以在template上使用
![](https://hackmd.io/_uploads/H1JPOjR-p.png)


### 3. 在路由中, 當時因為少了 "導航守衛", 導致當sectionStorge 被清掉時, 無法自動導到login, 後來加上這段
```
// 判定登入
router.beforeEach((to, from, next) => {
  const token = sessionStorage.getItem("userToken");
  if (to.name !== "ForgetPassword" && to.name !== "Login" && !token)
    next({ name: "Login" });
  else next();
});
```


### 4. 目前每次刷新頁面時, 都會執行一次取user-info
```js
在app.vue 中執行

  mounted() {
    setTimeout(() => {
      this.checkLogin();
    }, 500);
  },
```
```js
    checkLogin() {
      // 這隻應該是多打的, 造成沒有token時,會報錯
      // this.$store.dispatch("user/getProfile");
      const token = sessionStorage.getItem("userToken");
      const currentRouteName = this.$router.currentRoute.name;
      if (token) {
        this.$store
          .dispatch("user/getProfile")
          .then((res) => {})
          .catch((err) => {
            if (
              currentRouteName !== "ForgetPassword" &&
              currentRouteName !== "Login" &&
              currentRouteName !== "Logout"
            ) {
              this.go("/login");
            }
          });
      } else {
        if (
          currentRouteName !== "ForgetPassword" &&
          currentRouteName !== "Login" &&
          currentRouteName !== "Logout"
        ) {
          this.go("/login");
        }
      }
    },
```
但是這也導致每次F5 都會重取一次 , 建議是可以存在localStorge 或是  sectionStorge

----
後來思考後, 覺得如果是因為"權限"被上層帳號改動時 希望即時性被強制登出  又或是選單即時增減狀況, 需要重取user-info 的話, 最好的做法是可以透過`webSocket`  或是  `socketIO` 做處理, 當然這製作成品就會相對提高 , 需要後端一起配合