每日一篇------23秋招VUE面经（7）

⭐vuex的使用流程

vuex本质是一个插件，下载引入后通过Vue.use方法进行注册，最终new Vue的时候将其作为配置项传入，之后全局就可以通过Vue原型上的$store属性获取到vuex实例

ini 复制代码

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

配置好后我们通过Vuex.store创建Vuex store实例，在其中进行配置

state：数据仓库，存放数据
getters：可以获取state中的属性，做处理后返回，同时产生缓存，下一次调用时若其中依赖项没有更新，则返回缓存值，与计算属性类似
mutation：在其中修改state中的属性，在组件中通过$store.commit('mutationName')进行提交修改
actions：在其中进行异步任务处理，在组件中通过$store.dispatch('actionsName')进行提交，actions中的方法会默认传入context，我们一般将commit解构出来，待异步任务完成后，调用commit通知mutation进行数据修改

modules：在数据变多，vuex store配置变得臃肿时，就可以通过分模块的方式将相同功能逻辑的数据单独定义成模块，在提交commit或dispatch时，要加上模块路径：$store.commit('moduleA/mutationName')

css 复制代码

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
};

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
};

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
});

⭐说一说vue怎么做权限管理

前端的权限控制可以分为四个方面：

接口权限
路由权限
菜单权限
按钮权限

接口权限

前端发起请求时，通过axios请求拦截器拦截请求，在头部附上token，后端拿到token进行解析（一般是jwt），如果token有效，就进行响应，如果token失效，则返回错误信息。

前端拿到错误信息后再进行错误处理（弹窗提示、跳转登录页等等）

kotlin 复制代码

axios.interceptors.request.use(config => {
    config.headers['token'] = cookie.get('token')
    return config
})
axios.interceptors.response.use(res=>{},{response}=>{
    if (response.data.code === 40099 || response.data.code === 40098) { //token过期或者错误
        router.push('/login')
    }
})

路由权限

路由权限的设置分两种方式：

一种我们可以在路由的meta中配置可进入的角色，在路由跳转时自动进行检验
css 复制代码
```
path: '/permission',
    component: Layout,
    redirect: '/permission/index',
    meta: {
      title: 'permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // 菜单，配置权限角色
    },
```
缺点：一次加载了所有路由，即使没有权限的也加载了，每次跳转都要进行权限判断，影响性能，而且路由和菜单耦合度高
一种可以先挂载默认路由，在用户登陆后根据角色过滤出有权限的路由再进行动态添加：router.addRoutes(store.getters.addRouters)，这样用户没有权限的路由就不会被加载，强行从URL进入的话就会进入404页，从根源上解决了问题缺点：同样路由和菜单耦合度高

菜单权限

针对上述路由和菜单耦合度高的情况，将路由和权限菜单分开来写

同样也分为两种方式：

菜单部分由后端返回，路由在前端定义。在应用初始化的时候，只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载。缺点：前端添加新模块时，后端菜单也要进行变动。且每次路由跳转时都要判断
后端直接返回筛选好的路由。在将后端返回路由通过addRoutes动态挂载之前，需要将数据处理一下，将component字段换为真正的组件。缺点：前后端配合度高，且还是每次跳转都要进行判断

按钮权限

使用v-if根据权限控制按钮的显示隐藏
以自定义指令的形式，传入需要的权限，如v-has='edit'，在binding中拿到现有的权限列表，查看edit是否在其中，若不在其中，则为该按钮设置display:none或者直接移除该dom

🔥每日一篇——23秋招VUE面经（7）