主页 / 网络编程 /

Nuxt.js SSR与权限验证的实现

网络编程 2021-07-04 16:47www.168986.cn编程入门
这篇文章主要介绍了Nuxt.js SSR与权限验证的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

Nuxt.js是一个建立在Vue.js基础上的服务端渲染框架。它非常易于上手并且可以让你在几分钟内构建你的应用。

服务端渲染是一个解决所有SPA的SEO问题的伟大解决方案，但不幸的是它带来了另一个问题权限验证成了另一个项目管理中的痛点。

Nuxt.js官网提供了一个称为“路由鉴权”的示例()。它展示了如何通过一个中间件来限定一个页面是否可访问，这个检查是在客户端的进行的并且服务端渲染出的内容无论是否进行权限验证都是一样的。

那么我们如何在服务端渲染一个特定的内容呢？这里有一个解决方案！

服务端渲染通常是这样进行的客户端发起一个请求，例如访问“/articles/page/1”，服务端渲染框架访问一个返回JSON数据的API然后生成页面并将其发送至客户端。

我们在这个过程中缺少的是指定一个token或者其他什么来进行权限验证的过程。或许一个包含权限token的Cookie是一个好办法，它能在头部被读取，我们的服务端渲染框架能传递它或是把它发送到API。

我们要创建两个插件

import axios from 'axios'

let options = {};
if (process.SERVER_BUILD) {
 options.baseURL = `http://api:3030`
}

let ax = {
 options,
 create: (token) => {
 options.headers = {
  Authorization: token
 }
 return axios.create(ax.options)
 }
}

 export default ax

这个插件能让我们通过Axios发送带token的请求。

const getCookie = function(ame, req) {
 let name = ame + "="
 let decodedCookie
 if (typeof window === 'undefined') decodedCookie = decodeURIComponent(req.headers.cookie)
 else decodedCookie = decodeURIComponent(document.cookie)
 let ca = decodedCookie.split(';')
 for(let i = 0; i <ca.length; i++) {
  let c = ca[i]
  while (c.charAt(0) == ' ') {
   c = c.substring(1)
  }
  if (c.indexOf(name) == 0) {
   return c.substring(name.length, c.length)
  }
 }
 return ""
}
export default getCookie

这一个插件则是从Cookie中获取token。

接下来你就能在一个“async fetch”方法中简单地使用它们

import axios from '~plugins/axios'
import getCookie from '~plugins/getCookie'
export default {
 async fetch ({ store, isServer, req, redirect }) {
  if(isServer) {
   const ax = axios.create(getCookie('token', req))
   try {
    let { data } = await ax.get('/populate')
    if(data.store && data.store.user) store.mit('user/setData', data.store.user)
    else redirect('/login')
   } catch(e) {}
  }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：nuxt.js中间件实现拦截权限判断的方法 下一篇：详解nuxt路由鉴权(express模板)

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by