初識ABP vNext（4）：vue使用者登入&選單許可權

xhznl發表於2020-08-19

Tips：本篇已加入系列文章閱讀目錄，可點選檢視更多相關文章。

前言

上一篇已經建立好了前後端專案，本篇開始編碼部分。

開始

幾乎所有的系統都繞不開登入功能，那麼就從登入開始，完成使用者登入以及使用者選單許可權控制。

我使用的是password flow，這個flow無需重定向。如果你的網站應用只有一個的話，可以這麼做，如果有多個的話建議採用其他oidc方式，把認證介面放到identityserver程式裡，客戶端重定向到identityserver去認證，這樣其實更安全，並且你無需在每個客戶端網站都做一遍登入介面和邏輯。。。

還有一點，嚴格來說不應該直接訪問/connect/token端點獲取token。首先應該從identityserver發現文件/.well-known/openid-configuration中獲取配置資訊，然後從/.well-known/openid-configuration/jwks端點獲取公鑰等資訊用於校驗token合法性，最後才是獲取token。ABP的Angular版本就是這麼做的，不過他是使用angular-oauth2-oidc這個庫完成，我暫時沒有找到其他的支援password flow的開源庫，參考：https://github.com/IdentityModel/oidc-client-js/issues/234

前端想正常訪問介面，首先需要在HttpApi.Host，IdentityServer增加跨域配置：

前端部分需要修改的檔案太多，下面只貼出部分主要程式碼，需要完整原始碼的可以去GitHub拉取。

src\store\modules\user.js：

const clientSetting = {
  grant_type: "password",
  scope: "HelloAbp",
  username: "",
  password: "",
  client_id: "HelloAbp_App",
  client_secret: "1q2w3e*"
};
const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      clientSetting.username = username.trim()
      clientSetting.password = password
      login(clientSetting)
        .then(response => {
          const data = response
          commit('SET_TOKEN', data.access_token)
          setToken(data.access_token).then(() => {
            resolve()
          })
        })
        .catch(error => {
          reject(error)
        })
    })
  },

  // get user info
  getInfo({ commit }) {
    return new Promise((resolve, reject) => {
      getInfo()
        .then(response => {
          const data = response

          if (!data) {
            reject('Verification failed, please Login again.')
          }

          const { name } = data

          commit('SET_NAME', name)
          commit('SET_AVATAR', '')
          commit('SET_INTRODUCTION', '')
          resolve(data)
        })
        .catch(error => {
          reject(error)
        })
    })
  },

  setRoles({ commit }, roles) {
    commit('SET_ROLES', roles)
  },

  // user logout
  logout({ commit, dispatch }) {
    return new Promise((resolve, reject) => {
      logout()
        .then(() => {
          commit('SET_TOKEN', '')
          commit('SET_NAME', '')
          commit('SET_AVATAR', '')
          commit('SET_INTRODUCTION', '')
          commit('SET_ROLES', [])
          removeToken().then(() => {
            resetRouter()
            // reset visited views and cached views
            // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
            dispatch('tagsView/delAllViews', null, { root: true })

            resolve()
          })
        })
        .catch(error => {
          reject(error)
        })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      commit('SET_TOKEN', '')
      commit('SET_NAME', '')
      commit('SET_AVATAR', '')
      commit('SET_INTRODUCTION', '')
      commit('SET_ROLES', [])
      removeToken().then(() => {
        resolve()
      })
    })
  }
}

src\utils\auth.js：

export async function setToken(token) {
  const result = Cookies.set(TokenKey, token);
  await store.dispatch("app/applicationConfiguration");
  return result;
}

export async function removeToken() {
  const result = Cookies.remove(TokenKey);
  await store.dispatch("app/applicationConfiguration");
  return result;
}

src\api\user.js：

export function login(data) {
  return request({
    baseURL: "https://localhost:44364",
    url: "/connect/token",
    method: "post",
    headers: { "content-type": "application/x-www-form-urlencoded" },
    data: qs.stringify(data),
  });
}

export function getInfo() {
  return request({
    url: "/api/identity/my-profile",
    method: "get",
  });
}

export function logout() {
  return request({
    baseURL: "https://localhost:44364",
    url: "/api/account/logout",
    method: "get",
  });
}

src\utils\request.js：

service.interceptors.request.use(
  (config) => {
    // do something before request is sent

    if (store.getters.token) {
      config.headers["authorization"] = "Bearer " + getToken();
    }
    return config;
  },
  (error) => {
    // do something with request error
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// response interceptor
service.interceptors.response.use(
  (response) => {
    const res = response.data;

    return res;
  },
  (error) => {
    console.log("err" + error); // for debug
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000,
    });

    if (error.status === 401) {
      // to re-login
      MessageBox.confirm(
        "You have been logged out, you can cancel to stay on this page, or log in again",
        "Confirm logout",
        {
          confirmButtonText: "Re-Login",
          cancelButtonText: "Cancel",
          type: "warning",
        }
      ).then(() => {
        store.dispatch("user/resetToken").then(() => {
          location.reload();
        });
      });
    }

    return Promise.reject(error);
  }
);

選單許可權

vue-element-admin的選單許可權是使用使用者角色來控制的，我們不需要role。前面分析過，通過/api/abp/application-configuration介面的auth.grantedPolicies欄位，與對應的選單路由繫結，就可以實現許可權控制了。

src\permission.js：

router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start();

  // set page title
  document.title = getPageTitle(to.meta.title);

  let abpConfig = store.getters.abpConfig;
  if (!abpConfig) {
    abpConfig = await store.dispatch("app/applicationConfiguration");
  }

  if (abpConfig.currentUser.isAuthenticated) {
    if (to.path === "/login") {
      // if is logged in, redirect to the home page
      next({ path: "/" });
      NProgress.done(); // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      //user name
      const name = store.getters.name;

      if (name) {
        next();
      } else {
        try {
          // get user info
          await store.dispatch("user/getInfo");

          store.dispatch("user/setRoles", abpConfig.currentUser.roles);
            
          const grantedPolicies = abpConfig.auth.grantedPolicies;

          // generate accessible routes map based on grantedPolicies
          const accessRoutes = await store.dispatch(
            "permission/generateRoutes",
            grantedPolicies
          );

          // dynamically add accessible routes
          router.addRoutes(accessRoutes);

          // hack method to ensure that addRoutes is complete
          // set the replace: true, so the navigation will not leave a history record
          next({ ...to, replace: true });
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch("user/resetToken");
          Message.error(error || "Has Error");
          next(`/login?redirect=${to.path}`);
          NProgress.done();
        }
      }
    }
  } else {
    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.path}`);
      NProgress.done();
    }
  }
});

src\store\modules\permission.js：

function hasPermission(grantedPolicies, route) {
  if (route.meta && route.meta.policy) {
    const policy = route.meta.policy;
    return grantedPolicies[policy];
  } else {
    return true;
  }
}

export function filterAsyncRoutes(routes, grantedPolicies) {
  const res = [];

  routes.forEach((route) => {
    const tmp = { ...route };
    if (hasPermission(grantedPolicies, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, grantedPolicies);
      }
      res.push(tmp);
    }
  });

  return res;
}

const state = {
  routes: [],
  addRoutes: [],
};

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes;
    state.routes = constantRoutes.concat(routes);
  },
};

const actions = {
  generateRoutes({ commit }, grantedPolicies) {
    return new Promise((resolve) => {
      let accessedRoutes = filterAsyncRoutes(asyncRoutes, grantedPolicies);
      commit("SET_ROUTES", accessedRoutes);
      resolve(accessedRoutes);
    });
  },
};

src\router\index.js：

export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    alwaysShow: true, // will always show the root menu
    name: 'Permission',
    meta: {
      title: 'permission',
      icon: 'lock',
      policy: 'AbpIdentity.Roles'
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: {
          title: 'pagePermission',
          policy: 'AbpIdentity.Roles'
        }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'DirectivePermission',
        meta: {
          title: 'directivePermission',
          policy: 'AbpIdentity.Roles'
        }
      },
      {
        path: 'role',
        component: () => import('@/views/permission/role'),
        name: 'RolePermission',
        meta: {
          title: 'rolePermission',
          policy: 'AbpIdentity.Roles'
        }
      }
    ]
  },

  。。。。。。

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

因為選單太多了，就拿其中的一個“許可權測試頁”選單舉例，將它與AbpIdentity.Roles繫結測試。

執行測試

執行前後端專案，使用預設賬號admin/1q2w3E*登入系統：

正常的話就可以進入這個介面了：

目前可以看到“許可權測試頁”選單，因為現在還沒有設定許可權的介面，所以我手動去資料庫把這條許可權資料刪除，然後測試一下：

但是手動去資料庫改這個表的話會有很長一段時間的快取，在redis中，暫時沒去研究這個快取機制，正常通過介面修改應該不會這樣。。。

我手動清理了redis，執行結果如下：

最後

本篇實現了前端部分的登入和選單許可權控制，但是還有很多細節問題需要處理。比如右上角的使用者頭像，ABP的預設使用者表中是沒有頭像和使用者介紹欄位的，下篇將完善這些問題，還有刪除掉vue-element-admin多餘的選單。

初識ABP vNext（3）：vue對接ABP基本思路
2020-08-17
Vue
十、Abp vNext 基礎篇丨許可權
2021-09-23
初識ABP vNext（6）：vue+ABP實現國際化
2020-08-26
Vue
初識ABP vNext（8）：ABP特徵管理
2020-09-04
特徵
許可權之選單許可權
2019-04-17
初識ABP vNext（10）：ABP設定管理
2020-09-17
[Abp vNext 原始碼分析] - 7. 許可權與驗證
2019-08-07
原始碼
初識ABP vNext（5）：ABP擴充套件實體
2020-08-21
套件
初識ABP vNext（7）：vue身份認證管理&租戶管理
2020-08-28
Vue
Linux 使用者ssh登入許可權檢查
2011-07-12
Linux
初識ABP vNext（9）：ABP模組化開發-檔案管理
2020-09-14
.net core3.1 abp動態選單和動態許可權（思路）（二）
2020-06-12
01【若依框架】登入許可權
2020-12-06
框架
單點登入與許可權管理本質：HTTP重定向
2018-02-28
HTTP
ORACLE 觸發器控制使用者登入之許可權限制
2017-01-04
Oracle觸發器
初識ABP vNext（1）：開篇計劃&基礎知識
2020-08-13
django許可權之二級選單
2018-11-15
Django
選單許可權表sqlite和mysql
2024-04-23
SQLiteMySql
vue router 許可權
2018-12-17
Vue
單點登入與許可權管理本質：cookie安全問題
2018-03-10
Cookie
如何用 Vue 實現前端許可權控制（路由許可權 + 檢視許可權 + 請求許可權）
2018-04-12
Vue前端路由
【C#MVC4】選單管理和訪問許可權分配（四）
2016-09-04
C#MVC訪問許可權
[Abp vNext 原始碼分析] - 4. 工作單元
2019-07-01
原始碼
入門MySQL——使用者與許可權
2020-07-03
MySql
MySQL入門--使用者與許可權
2019-05-29
MySql
MySQL資料庫許可權體系入門(4)---管理全域性許可權
2010-10-14
MySql資料庫
MYSQL 開啟root遠端登入許可權
2017-07-18
MySql
Oracle 使用者、物件許可權、系統許可權
2014-01-01
Oracle物件
手摸手，帶你用vue擼後臺系列二(登入許可權篇)
2017-05-22
Vue
單點登入與許可權管理本質：session和cookie介紹
2018-02-27
SessionCookie
MySQL資料庫許可權體系入門(3)---管理使用者許可權
2010-09-29
MySql資料庫
使用者許可權繼承另一使用者的許可權
2013-11-29
繼承
Linux賬號安全——使用者登陸許可權
2015-10-15
Linux
【許可權管理】Oracle中檢視、回收使用者許可權
2013-11-21
Oracle
實現ABP中Person類的許可權功能
2016-08-16
sqlplus / as sysdba 登入報許可權不足 for windows
2008-11-11
SQLWindows
vue+element-ui實現動態的許可權管理和選單渲染
2019-10-02
VueUI
初識ABP vNext（12）：模組的獨立執行與託管
2020-10-30