详解nuxt路由鉴权(express模板)

2023年6月11日上午11:24 • JavaScript

下面我来详细讲解“详解nuxt路由鉴权(express模板)”的完整攻略。

什么是nuxt路由鉴权

nuxt是基于Vue.js的应用框架，而路由鉴权是指在用户访问某些路由前，需要进行身份验证，以保障路由的安全性与保密性。nuxt路由鉴权就是在nuxt框架中实现路由鉴权的一种方法。

实现nuxt路由鉴权的步骤

下面是实现nuxt路由鉴权的具体步骤：

步骤一：创建middleware

在nuxt中，middleware是在路由（页面组件）执行之前执行的JavaScript函数。我们可以通过在middleware中，对请求进行身份认证，以保证路由的安全性。

在middleware目录下新建auth.js文件，用于验证用户是否已登录：

export default function ({ store, redirect }) {
  // 如果用户未登录，则重定向到登录页
  if (!store.state.isAuthenticated) {
    return redirect('/login')
  }
}

步骤二：在路由中引入middleware

在我们的路由配置中，可以通过middleware选项，将middleware引入到路由中。我们可以在需要进行路由鉴权的路由配置中，添加middleware选项来引入auth.js文件。

例如，我们需要对dashboard这个路由进行鉴权，可以这样配置：

{
  path: '/dashboard',
  component: '~/pages/dashboard.vue',
  middleware: ['auth']
}

步骤三：在store中实现鉴权逻辑

在步骤一的auth middleware中，我们使用store.state.isAuthenticated来判断用户是否已经登录。而store则是在nuxt中，用于管理应用程序的状态的统一存储库。

因此，我们需要在store中，实现用户鉴权的逻辑。在store目录下新建index.js文件，实现以下方法：

export const state = () => ({
  isAuthenticated: false
})

export const mutations = {
  setAuthentication (state, status) {
    state.isAuthenticated = status
  }
}

在这里，我们首先定义了初始状态isAuthenticated为false，代表用户未登录。然后，我们实现了一个mutations函数，用于更改isAuthenticated的状态。

步骤四：在登录页面更新storeId

在登录页面上，应该向后端发送登录请求，如果请求成功，应该将返回的用户数据存储到vuex中，方便在后续进行鉴权的时候获取用户信息。

async login({ commit }, credentials) {
  try {
    const { data } = await axios.post('/api/login', credentials)
    if (data) {
      commit('setUser', data.user)
      commit('setAuthentication', true)
    }
  } catch (err) {
    console.error(err)
    throw err.response.data
  }
}

在这里，我们通过向后端发送登录请求，获取到用户数据后，调用setUser和setAuthentication方法更新store中的状态。

示例一：使用nuxt-route-middleware插件

除了手动实现middleware外，我们还可以使用nuxt-route-middleware插件来简化鉴权逻辑。这个插件可以在路由中定义securtiy属性，用于控制路由的鉴权策略。

在nuxt中，修改nuxt.config.js如下：

export default {
  ...
  modules: [
    // ...
    '@nuxtjs/router',
    'nuxt-route-middleware',
  ],

  router: {
    middleware: 'route-middleware'
  },

  routerMiddleware: {
    auth: require('@nuxtjs/route-middleware/examples/auth'),
  },

  middleware: [
    'routerMiddleware'
  ]
}

这样就完成了路由鉴权的配置，使用security属性即可定义路由所需的鉴权策略：

export default {
  security: {
    auth: true
  }
}

示例二：使用cookie-session鉴权

除了使用store进行鉴权之外，我们还可以使用cookie-session来进行鉴权。cookie-session是基于cookie的会话管理工具，可以用于管理用户登录状态。

我们可以在Nuxt.js应用程序中，通过安装cookie-parser和express-session中间件，实现使用cookie-session的身份验证。

首先，我们在nuxt.config.js中进行中间件配置：

export default {
  serverMiddleware: [
    'cookie-parser',
    'express-session',
    { path: '/api', handler: '~/server/api.js' }
  ]
}

为了让服务器端中的middleware和路由中的middleware都能访问已登录用户的cookie，需要禁用Nuxt.js中SSR模式自动将store持久化到cookie的功能：

export default {
  target: 'server', // ssr使用必须
  ssr: false, // 必须禁用持久化
  // ...
}

然后在中间件auth.js中使用req.session.userId判断用户登录状态

export default function (req, res, next) {
  if (!req.session || !req.session.userId) {
    res.redirect('/login')
    return
  }
  next()
}

在登录页面中使用cookie-session：

async login({ commit }, credentials) {
  try {
    const { data } = await axios.post('/api/login', credentials)
    if (data) {
      commit('setUser', data.user)
      commit('setAuthentication', true)
      // 使用cookie-session储存用户数据
      document.cookie = `sessionId=${data.sessionId}; path=/;`
    }
  } catch (err) {
    console.error(err)
    throw err.response.data
  }
}