前后端分离实践：基于 vue 实现网站前台的权限管理

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2483 天前的主题，其中的信息可能已经有所发展或是发生改变。

Javascript 做为当下的热门语言，用途很广泛，从前端到后端处处可见其存在，该技术如今在我们项目内部也大量使用来开发诸如 CMS 系统以及其他其他一些数据分析系统的前端页面，为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习。

Javascript 框架鳞次栉比，但基本原理大致相同，因此选用国内人开发的 vue.js 进行一个初步的尝试。学习 vue.js 也一周多的时间了，说起 vue 的主要用法，无外乎 Declarative Rendering、Component System、Client-side Routing、Vue-resource、Axios 以及视项目大小而决定是否使用的 Vuex，学习 vue 事小，主要转变思维，面向前后端分离的组件式 web 开发才是真正想去实践的。

正好我的个人网站 CodeSheep 最近要开发后台管理，因此正好用 vue 这一套来实现了一下。说到后台管理，绕不开的问题就是权限的管理。既然想实践前后端分离这种思想，因此后台管理的所有 web 前端的东西应该独立由前端完成，这其中就包括很重要的由前端来根据权限进行相关东西的控制。我们想要做到的是：不同的权限对应着不同的路由，同时页面侧边栏也应该根据不同的权限，来异步生成对应的菜单，讲白了就是后台管理时不同权限的用户其看到的界面菜单是不一样的，因此有了这里实现登录和权限验证的一套流程。

##具体实现 ###1、点击“登录”按钮触发登录事件

this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
  this.$router.push({ path: '/' }); //登录成功之后重定向到首页
}).catch(err => {
  this.$message.error(err); //登录失败提示错误
});

其中异步触发的 actions LoginByEmail 的处理内容如下：

LoginByEmail ({ commit }, userInfo) {
      const email = userInfo.email.trim()
      return new Promise((resolve, reject) => {
        loginByEmail(email, userInfo.password).then(response => {
          const data = response.data
          setToken(response.data.token)
          commit('SET_TOKEN', data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }

很容易看出想做的是将从服务器端拿到的 token （唯一标示用户身份）放到浏览器本地 Cookie 中去

###2、全局钩子 router.beforeEach 中拦截路由这一步是核心，具体处理流程示意如下：

路由拦截处理流程

具体代码如下：

router.beforeEach((to, from, next) => {
  if (getToken()) {  // 判断是否取到 token
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.roles.length === 0) {  // 判断当前用户是否已获取完 user_info 信息
        store.dispatch('GetInfo').then(res => { // 获取 user_info
          const roles = res.data.role
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
            router.addRoutes(store.getters.addRouters)  // 动态添加可访问路由表
            next({ ...to }) // 放行路由
          })
        }).catch(() => {
          store.dispatch('FedLogOut').then(() => {
            next({ path: '/login' })
          })
        })
      } else {
        next() // 放行该路由
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单里的路径，继续让其访问
      next()
    } else { // 其他不在白名单里的路径全部让其重定向到登录页面！
      next('/login')
      alert('not in white list, now go to the login page')
    }
  }
})

流程图中几个重要步骤解释一下：

判断前端是否取到了 token 令牌：getToken()

操作很简单，主要是从 Cookie 中获取，看 token 是不是已经拿到了：

export function getToken () {
  return Cookies.get(TokenKey)
}

vuex 异步操作 store.dispatch('GetInfo')：获取用户信息

    GetInfo ({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo(state.token).then(response => {
          const data = response.data
          console.log(data)
          commit('SET_ROLES', data.role)
          commit('SET_NAME', data.name)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    }

操作也很简单，用一个 get 的 restful api 从服务器获取用户的角色和名字

vuex 异步操作 store.dispatch('GenerateRoutes', { roles })：根据不同的 roles 来生成不同的前台路由

    GenerateRoutes ({ commit }, data) {
      return new Promise(resolve => {
        const { roles } = data
        let accessedRouters
        if (roles.indexOf('admin') >= 0) {
          accessedRouters = asyncRouter
        } else {
          accessedRouters = filterAsyncRouter(asyncRouter, roles)
        }
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    }