Question

我在nuxt中有一条只能由登录用户/ dashboard / secret访问的路由。

在/dashboard页中，我有一个像这样的链接：

<nuxt-link to="/dashboard/secret">Link to "secret" page</nuxt-link>

点击后，nuxt将从

获取该页面

myapp.com/_nuxt/pages_dashboard_secret.js

如何为该nuxt路由添加身份验证，以阻止人们手动转到该URL并阅读内容？

是的，实际的机密数据将从用于验证用户令牌的外部api中获取，但是人们甚至可以看到此页面的html似乎还是错误的

Answer 1

您不能在客户端（使用JS代码）中保守秘密，每个使用您的应用程序的人都可以从他的浏览器中获取它。您需要在服务器端保留秘密密钥，并提供一些验证终结点以提供用户是否有效，或者仅在登录后保留其会话。

Answer 2

如果您只想保护js文件，则这样做是错误的。但是，如果您只是想防止用户手动访问路由，则必须尝试Nuxt Middlewares并编写用于认证和用户获取的中间件。

中间件结构可以很简单：

export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

，您可以在根（或secretPage）布局中像这样简单地使用它：

<template>
  <h1>Secret page</h1>
</template>

<script>
export default {
  middleware: 'authenticated'
}
</script>

Answer 3

您可以使用nuxt/auth包，这是您的工作情况，可以用作插件和模块，可以检查是否具有可访问的页面，它是否自动运行并具有语义结构

Answer 4

将令牌保存在nuxtServerInit上的存储区中，或在获取令牌时保存。
在/ dashboard / secret页面上，以获取方法检查是否设置了令牌。

如果设置了令牌，则获取数据，否则将使用重定向到其他地方 https://nuxtjs.org/examples/auth-routes/#redirect-user-if-not-connected

Answer 5

对于这样的页面保护，中间件是确定的方法。

在中间件目录中创建一个中间件文件
按照此处 https://nuxtjs.org/api/pages-middleware/
然后在页面组件中添加中间件选项

Answer 6

正如前面提到的，路由应该在服务器上完成，以防万一您只想处理它 store / index.js操作

async nuxtServerInit({ dispatch, commit }, { req }) {
    try {
      if (process.server && process.static) { return }
      if (!req.headers.cookie) {
        console.log('return ')
        return
      }
      const parsed = cookieparser.parse(req.headers.cookie)
      const accessTokenCookie = parsed.__session
      if (!accessTokenCookie) { return }
      const decoded = JWTDecode(accessTokenCookie)
        if (userData.exists) {
          commit('setState', { name: 'user',
            value: {
              uid: decoded.user_id,
              email: decoded.email,
              ...userData.data()
            } })
        } 
    } catch (e) {
      console.log(e)
    }
  },
//Login firebase
 async fireLogin({ dispatch }, { singInWith, account }) {
    const resp = await this.$firebase.auth()signInWithEmailAndPassword(account.email, account.password)
    const token = await resp.user.getIdToken()
    Cookie.set('__session', token)
    return { email: resp.user.email, uid: resp.user.uid }
 }

Middleware / auth.js

export default function({ store, route, redirect }) {
  const user = store.state.user
  const blockedRoute = /\/admin\/*/g
  const homeRoute = '/'

  if (!user && route.path.match(blockedRoute)) {
    redirect('/')
  }

  /*if (user && route.path === homeRoute) {
    redirect('/admin')
  }*/
}

nuxt.config

router: {
    middleware: [
      'authenticated'
    ]
  },

Nuxt js <nuxt-link>身份验证

6 个答案: