技術標籤：前端vue.js

登入控制是各類管理系統的基礎功能，實現方案也是成熟的。

思路

業界常規做法如下：

1. 使用者登入之後，伺服器返回使用者的資訊（使用者id, 姓名，使用者名稱）和Token。前端把這些資料寫入到localStorage中。
2. 當用戶打算進入受保護頁面時，前端程式檢查是拿到token或者使用者id。如果沒有，說明使用者沒登入，直接跳轉到登入頁面。
3. 如果檢查通過就正常進入頁面，需要從後臺取資料的時候，在Request Header中帶上Token, 供服務端做身份驗證。

對應這個思路，程式上做如下修改：第一、二 兩點修改 vue router 設定使用路由守衛(Route guard)來實現 ；第三點修改 axios 配置，使用axios攔截器來實現。

實現

• 在router中用 meta requiresAuth 來區分需不需要登入

  {
    path: "/",
    name: "Login",
    component: () =>
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      import(/* webpackChunkName: "login" */
 
 "../views/Login.vue")
  },
  {
    path: "/dashboard",
    name: "Dashboard",
    meta: {
      requiresAuth: true  //需要登入才能訪問
    },
    component: () =>
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
 

      import(/* webpackChunkName: "dashboard" */ "../views/Dashboard.vue")
  },

• 使用路由守衛判斷 1. 頁面是否需要登入，2. 使用者有沒有拿到userId

router.beforeEach((to, from, next) => {
  const loggedIn = localStorage.getItem("userId");
  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next({ name: "Login" });
  }
  next();
});

在Axois傳送請求之前在Request Header中帶上Token, 收到返回之後檢查返回結果。如果token過期或者請求上沒帶token了，服務端會返回401狀態碼。前端收到401之後，主動跳轉到登入頁面。

//在請求發出前Header中加上 token
apiClient.interceptors.request.use(config => {
  let token = localStorage.getItem("accessToken");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

//如果服務端返回401,則跳轉到登入頁面
apiClient.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response.status == 401) {
      router.push({ name: "Login" });
    } else {
      return Promise.reject(error);
    }
  }
);

總結

上面有兩點非常標準。

1. 基於token的認證，token寫在header中，header名稱為 Authorization， 值的形式為 “Bearer {token}” 這種形式
2. 沒有許可權的請求，服務端返回標準HTTP狀態碼401表示