@zhengxy/security-access-authentication v1.2.1

插件使用说明

本插件基于vue，vue-router，vuex开发的权限控制。

插件包含如下几个模块：

• 登录授权接口，登出接口
• 接口鉴权（判断接口是否有权限操作）
• 菜单控制（导航菜单根据接口返回动态配置）
• 路由跳转控制（跳转某个路由，是否有权限）
• 界面重刷菜单权限控制（网页刷新重新配置权限）
• PKCE统一登录认证授权

如何安装

npm install @zhengxy/security-access-authentication --save

安装vuex module

插件包含了一个vuex 的 module auth

//引入auth方法
import { auth } from '@zhengxy/security-access-authentication'

//添加auth方法到module
modules: {
        ...
        auth:auth(env,tenantId,routes),
        ...
    }    

说明：

• env是当前的项目环境：
  • local(本地开发)
  • dev(dev环境)
  • sit(sit环境)
  • uat(uat环境)
  • production(production环境)
• tenantId租户id，当前项目应用id，由后台同学提供
• routes路由配置对象
  • 例如

  [
  {
    path: '*',
    component: () => import('@/views/error/NotFound.vue'),
  },
  {
    path: '/auth',
    component: LayoutAuth,
    meta: {
      title: 'Login',
      public:true
    },
    redirect: '/auth/login',
    hidden: true,
    children: [
      {
        path: '/auth/login',
        name: 'login',
        meta: {
          title: 'Login',
          public:true
        },
        component: () => import('@/views/auth/Login.vue'),
      },
    ],
  }]

  这里public:true表示该路由在任何情况下都能够访问。 hidden:true表示该菜单不会在路由菜单中显示

由于auth是一个vuex 的module，其中包含了getters，actions，mutations，我们可在任何地方调用此module中的方法

• getters:

const getters = {
  getAccessToken: (state) => state.access_token,
  getAvatar: (state) => state.avatar,
  getUsername: (state) => state.username,
  getUserStatus: (state) => state.status,
  getUserMenus: (state) => state.menus,
  getUserPerms: (state) => state.perms,
  getRoutes: (state) => state.routes
}

• actions:

const actions = {
    login: {...},//登录接口，登录成功之后获取用户权限信息
    logout: {...},//登出接口
    fetchProfile: {...},//获取用户权限信息
    refreshUserProfile: {...}, //当页面重刷的时候可调用此方法，刷新用户权限
}

• mutations:

const mutations = {
    SET_ACCESS_TOKEN:()=>{...},
    SET_LOGIN_PROFILE:()=>{...},
    UPDATE_ROUTES:()=>{...}
}

登录登出鉴权接口

在登录的时候可调用登录接口

this.$store.dispatch('login',{
  username: {username},
  password: {password}
}).then(({menus,perms,roles,status,userId,username})=>{
  ...
  // menus ： which you can access menus
  // perms ： which you can access api
  // roles ： you current roles
  // status ：user status // 0:'停用',1:'正常',2:'未激活',
  // userId ：you account id
  // username you login account name
  
}).catch((e)=>{
  // You don't have any permissions
  ... 
})   

在登出的时候可调用登出接口

this.$store.dispatch('logout').then(()=>{
      //todo
    })

路由跳转控制:

• 引入路由权限控制方法

import {getPermission} from '@zhengxy/security-access-authentication'
//在路由控制回调函数里调用getPermission
router.beforeEach((to, from, next) => {
  const permission = getPermission(routes,store.getters.getUserMenus,to.path);
  switch (permission) {
    case 1://正常放行
      next();
      break;
    case 2:
        //无权限访问，跳转到403
        //next({ name: 'Forbidden'});
      break;
    case 3://无token访问,跳转登录
      //next({ name: 'login', query: { redirect: to.path } })
      break;
  }
  //auth route is authenticated
})

• 界面刷新，重新授权,重置授权菜单

//在页面加载的时候调用
store.dispatch('refreshUserProfile').then(res=>{
  if(res === 'UNAUTHORIZED'){//未授权
    //todo 
  }
  if(res === 'NO_TOKEN'){//无token
    //todo 
  }
}).catch(e=>{
  //接口异常
  //todo 
})

接口鉴权

可使用此方法鉴定接口是否授予权限(如无需鉴权，就不用做这一步)

//注册$V 方法，方便随时调用
import {verify} from '@zhengxy/security-access-authentication'
const apiObject = {
  "VoteList":"post:/webapi/vote/admin/votes",
  "VoteAdd":"post:/webapi/vote/admin/vote",
  "VoteDetail":"post:/webapi/vote/admin/{id}",
  "VoteResult":"get:/webapi/vote/admin/detail/{id}",
  "VoteUpdate":"post:/webapi/vote/admin/vote/{id}",
  "VoteDelete":"post:/webapi/vote/admin/delete/{id}",
  "VoteStop":"post:/webapi/vote/admin/disable/{id}",
  "VoteBegin":"post:/webapi/vote/admin/enable/{id}",
  "UserList":"post:/webapi/admin/users",
  "UserRoleUpdate":"post:/webapi/admin/user/role",
};
Vue.prototype.$V = verify(apiObject,store);
//apiObject 为你需要鉴权的接口，
//store 为vuex的store实例
//post:/webapi/vote/admin/enable/{id}
// post表示请求方式，{id}表示可变参数

注意此方法必须在获取用户（getProfile）权限成功之后调用

使用方式

<v-btn
  icon
  color="primary"
  v-bind="attrs"
  @click="addOrEdit"
  v-on="on"
  v-if="$V($V.api.VoteAdd)"
  >
    <v-icon> mdi-plus </v-icon>
  </v-btn>

$V($V.api.VoteAdd)表示，判断当前用户是否支持"VoteAdd":"post:/webapi/vote/admin/vote"这个接口

集成PKCE统一认证登录:

• 第一步：配置PKCE 默认使用的oauth2.0统一授权认证方式，提供ClientId和RedirectUri,初始化PKCE插件

   Vue.use(oauth,{
    clientId:ClientId,//你配置的ClientId，由后台提供
    redirectUri:RedirectUrl//你配置的回跳路径，由devops提供
  })

• 第二步：初始化应用，判断是否需要授权，如果需要跳转到授权中心，否则初始化VUE

   (async ()=>{
  Vue.use(oauth,{
  clientId:ClientId,
  redirectUri:RedirectUrl
  })
  if(await isAuthorized()){//此方法会返回是否授权
  const app = new Vue({
  router,
  store,
  i18n,
  vuetify,
  render: (h) => h(App),
  })
  app.$mount('#app')
  }
  })()

  由此可以明确判断，如果能走到new Vue的逻辑必定token获取成功