在 nuxt.js s-s-r 中，我使用 laravel sactum 创建了身份验证系统，我面临重定向错误

Posted 2023-02-22

【中文标题】在 nuxt.js s-s-r 中，我使用 laravel sactum 创建了身份验证系统，我面临重定向错误

【英文标题】：in nuxt.js s-s-r i was created authentication system using laravel sactum im facing redirecting error

【发布时间】：2021-08-01 12:16:56

【问题描述】：

nuxt.js 我使用 Laravel sanctum 实现了一个 s-s-r 身份验证系统，但我面临重定向问题。

当我在登顶登录按钮后输入登录凭据时，它没有重定向到仪表板，如果我需要访问仪表板，它仍然在登录页面上，我需要在注销时手动输入仪表板 URL。

nuxt.config.js

export default 
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: 
    title: 'hello',
    meta: [
       charset: 'utf-8' ,
       name: 'viewport', content: 'width=device-width, initial-scale=1' ,
       hid: 'description', name: 'description', content: '' 
    ],
    link: [
       rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' 
    ]
  ,

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  router: 
    middleware: ['auth'],
  ,

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',

    '@nuxtjs/auth-next',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: ,

  auth: 
    strategies: 
      'laravelSanctum': 
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints: 
          login: 
            url: "/api/login"
          ,
          logout: 
            url: "/api/logout"
          ,
          user: 
            url: "/api/user"
          
        ,
        user: 
          property: false
        
      
    ,

    redirect: 
      login: "/login",
      logout: "/",
      home: "/dashboard"
    

  ,

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: 
    manifest: 
      lang: 'en'
    
  ,

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: 
    babel: 
      plugins: [
        ['@babel/plugin-proposal-private-methods',  loose: true ]
      ]
    
  

中间件

export default ( app, redirect ) => 
  if (app.$auth.loggedIn) 
    return redirect("/");
  
;

登录页面

<template>
  <b-container>
    <b-row>
      <b-col cols="6" class="mx-auto">
        <b-card title="Login">
          <b-button variant="primary" @click="login()">Login</b-button>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default 
  middleware: ["guest"],
  data() 
    return 
      form: 
        email : "[e-mail]",
       password : "123321"
      
    ;
  ,

  methods: 
    login() 
      this.$auth
        .loginWith("laravelSanctum", 
          data: this.form
        )
        .then(response => console.log(response))
        .catch(error => console.log(error));     
    
  
;
</script>

布局默认

<template>
  <div>
    <div>
      <b-navbar type="dark" variant="dark">
         <b-navbar-brand href="/">NavBar</b-navbar-brand>
           <b-navbar-nav class="ml-auto">
            <template v-if="$auth.loggedIn">
              <b-nav-item to="/dashboard">Dashboard</b-nav-item>
              <b-nav-item href="#" @click.prevent="logout()">Logout</b-nav-item>
            </template>
            <template v-else>
              <b-nav-item to="/login">Login</b-nav-item>
            </template>
          </b-navbar-nav>
      </b-navbar>
    </div>
    <Nuxt />
  </div>
</template>

<script>
export default 
  methods: 
    async logout() 
      try 
        await this.$auth.logout();
       catch (error) 
        console.log(error);
      
    
  
;
</script>

【问题讨论】：

优先使用@click="login"而不是@click="login()"，否则会在渲染过程中调用该方法。 logout() 等当然也是如此。

【参考方案1】：

@nuxt/auth 已经有一个用于身份验证的中间件，你不需要自己做。 为了从中受益，您可以将其添加到您的 nuxt.config.js 文件中

router: 
  middleware: ['auth'],
,

在您想要加入白名单的任何.vue 文件中（也就是如果您不想检查loggedIn 是否为true），您可以使用auth 键

<script>
export default 
  auth: false, // will bypass the middleware's verification

</script>

在其他任何地方，它都会在继续之前仔细检查您是否已登录。否则，它会将您带到您指定的登录页面。

【讨论】：

感谢您的回复我尝试了您的回答，但仍然无法正常工作

你有github repo链接吗？

我没有 github repo 链接

你能做一个吗？没有任何minimal reproducible example 将很难为您提供帮助，因为对我来说，此解决方案运行良好。

我创建了github repo repo链接github.com/ramur77/nuxt.js.git谢谢