前端用户权限控制：vue-router与vuex的结合应用

"本文主要探讨如何使用vue-router和vuex构建用户权限控制系统，结合实际示例，阐述了前端和后端交互验证用户身份的过程。通过一个简单的node.js express服务，展示了登录验证及JWT（JSON Web Tokens）的使用，用于确保用户会话安全。" 在前端开发中，用户权限控制是一项关键任务，它涉及到用户角色、访问权限以及登录状态的管理。Vue.js作为一款流行的前端框架，其生态中的vue-router和vuex组件可以帮助我们有效地实现这一功能。vue-router负责页面路由管理和导航，而vuex则作为一个全局状态管理器，能够方便地处理应用程序的状态，包括用户的登录状态。 首先，后端服务器需要在用户成功登录时返回一个包含用户状态的加密 token。在这个例子中，使用了jsonwebtoken库来生成JWT。JWT包含了用户的标识信息，并经过私钥（在本例中为'rhwl'）加密，这样只有拥有相同私钥的后端才能解密并验证 token 的合法性。 当用户提交登录请求时，例如通过一个POST请求到'/login'，服务器会检查用户名（例如'admin'）。如果用户名正确，服务器将生成一个包含用户名的JWT，并将其作为响应的一部分返回给前端。JWT还包含了一个过期时间（如20秒），以限制令牌的有效期限。 前端收到JWT后，将其存储在本地存储（如localStorage或sessionStorage）中。随后，前端在发起每个需要验证的API请求时，都将这个token添加到请求头的Authorization字段中。这样，后端服务器在接收到请求时，可以通过验证token来确认用户的身份和会话状态。 在vue-router中，我们可以利用beforeEach钩子函数实现路由级别的权限控制。在每次路由切换前，这个钩子函数会被调用。在这里，我们可以检查当前存储的token，如果存在并且未过期，就允许用户访问受保护的路由；否则，重定向到登录页面。 ```javascript import Router from 'vue-router' import store from './store' const router = new Router({ // ... beforeEach(to, from, next) { const requiresAuth = to.meta.requiresAuth if (requiresAuth && !store.state.user.token) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } }) ``` 在vuex中，我们创建一个store来管理全局状态，包括用户的登录状态和token。每当收到后端的验证结果，或者用户执行登出操作时，都会更新这个状态。 ```javascript const store = new Vuex.Store({ state: { user: { token: null, username: null } }, mutations: { SET_TOKEN(state, token) { state.user.token = token // 其他状态更新逻辑... }, LOGOUT(state) { state.user.token = null // 清除其他相关用户状态... } }, actions: { async login({ commit }, payload) { // 发送登录请求，获取token const res = await axios.post('/login', payload) commit('SET_TOKEN', res.data.token) }, logout({ commit }) { commit('LOGOUT') } } }) ``` 通过这种方式，vue-router和vuex协同工作，实现了前端的用户权限控制。在用户登录、登出以及访问受保护路由时，都能确保正确的权限验证和状态管理。同时，使用JWT确保了数据的安全传输，增强了系统的安全性。