Nuxt.js 中间件实现路由权限验证

"本文将介绍如何在Nuxt.js框架中使用中间件(middleware)实现路由鉴权功能，主要涉及在客户端和服务端检查用户是否有访问权限，以及如何处理无权限的情况。" 在Nuxt.js中，路由鉴权是确保只有经过身份验证的用户才能访问特定路由的关键步骤。通常，我们可以通过检查用户的令牌（token），如JWT（JSON Web Tokens），来判断用户是否已登录并具有访问权限。在Nuxt.js项目中，我们可以创建一个自定义中间件来执行这种鉴权逻辑。 首先，我们需要在`middleware`文件夹下创建一个名为`auth.js`的新文件。在这个文件中，我们将编写代码来检查用户的token。为了实现这一点，我们可以从`~/utils/getCookie`导入一个辅助函数，这个函数用于获取客户端或服务器上的cookie。 ```javascript import getCookie from '~/utils/getCookie' export default function ({ route, req, res, redirect }) { let isClient = process.client; let isServer = process.server; let redirectURL = '/sign'; // 登录页面的路径 let token, path; // 在服务端进行鉴权 if (isServer) { // 获取服务端cookie const cookies = getCookie.getCookiesInServer(req) // 检查服务端cookie中是否包含token字段 token = cookies.token || ''; } // 在客户端进行鉴权 if (isClient) { // 获取客户端（本地）cookie中的token字段 token = getCookie.getCookiesInClient('token') } // 如果未获取到token，重定向到登录页面 if (!token) { redirect(redirectURL) } } ``` `getCookie.js`文件位于`~/utils`目录下，它使用了`js-cookie`库来处理cookie的操作： ```javascript // 首先，安装js-cookie库 npm install js-cookie import Cookie from 'js-cookie' export default { // 获取服务端cookie getCookiesInServer: function (req) { let service_cookie = {}; req && req.headers.cookie && req.headers.cookie.split(';').forEach(function (val) { let parts = val.split('='); service_cookie[parts[0].trim()] = (parts[1] || '').trim(); }); return service_cookie; }, // 获取客户端（本地）cookie中的token字段 getCookiesInClient: function (key) { return Cookie.get(key); } } ``` 通过这种方式，Nuxt.js的中间件可以在请求到达目标路由之前进行拦截，检查用户是否具有访问权限。如果用户未登录（即没有有效的token），则会自动重定向到登录页面。这种方法确保了应用程序的安全性，并防止未经授权的访问。 请注意，这只是一个基础示例，实际应用中可能需要考虑更多细节，例如处理刷新页面后token丢失的情况、使用Vuex管理状态、集成更复杂的认证策略等。此外，你还需要确保在服务器端处理登录逻辑，并正确设置cookie，以便在客户端可以访问。