Implementation of SSR and permission verification

It is a server-side rendering framework based on the foundation. It's very easy to get started and allows you to build your app in minutes.

Server-side rendering is a great solution to all SPAs' SEO problems, but unfortunately it brings another problem: permission verification becomes another pain point in project management.

The official website provides an example called "routing authentication" (/examples/auth-routes). It shows how to define whether a page is accessible through a middleware, but this check is performed on the client and the content rendered on the server is the same regardless of permission verification.

So how do we render a specific content on the server side? Here is a solution!

Server-side rendering usually happens like this: the client initiates a request, such as accessing "/articles/page/1", the server-side rendering framework accesses an API that returns JSON data and then generates a page and sends it to the client.

What we lack in this process is the process of specifying a token or something to verify permissions. Perhaps a cookie with permission token is a good idea, it can be read in the header, so our server-side rendering framework can pass it or send it to the API.

First we need to create two plugins:

import axios from 'axios'

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

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

 export default ax

This plugin allows us to send requests with tokens through Axios.

const getCookie = function(cname, req) {
 let name = cname + "="
 let decodedCookie
 if (typeof window === 'undefined') decodedCookie = decodeURIComponent()
 else decodedCookie = decodeURIComponent()
 let ca = (';')
 for(let i = 0; i <; i++) {
  let c = ca[i]
  while ((0) == ' ') {
   c = (1)
  }
  if ((name) == 0) {
   return (, )
  }
 }
 return ""
}
export default getCookie

This plugin gets tokens from cookies.

Next you can simply use them in a "async fetch" method:

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

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.