Giter Site home page Giter Site logo

nuxt-community / auth-module Goto Github PK

View Code? Open in Web Editor NEW
1.9K 41.0 925.0 8.07 MB

Zero-boilerplate authentication support for Nuxt 2

Home Page: https://auth.nuxtjs.org

License: MIT License

JavaScript 2.72% TypeScript 96.58% Vue 0.44% Shell 0.26%
nuxt auth module jwt token cookie ssr axios nuxt-module

auth-module's People

Contributors

atinux avatar auenkind avatar bcnzer avatar benmccallum avatar bmulholland avatar breakingrobot avatar darthf1 avatar dependabot[bot] avatar dungsil avatar farnabaz avatar harlan-zw avatar herbertscruz avatar hugome avatar injitools avatar intevel avatar jmschneider avatar joaopedroas51 avatar kevintechie avatar mannil avatar mathiasciarlo avatar pi0 avatar pjlindsay avatar renovate[bot] avatar ricardogobbosouza avatar robsontenorio avatar shealan avatar sky-code avatar thibaultvlacich avatar timmyg avatar yongzhenlow avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

auth-module's Issues

[ERROR] Cannot read property 'setToken' of undefined in not spa mode

Is this module supposed to be used only in spa mode?
If no version 3.4.1 dont work without mode spa. ( 3.2.1 works)
In spa mode all works fine.
But otherwise it just throw Cannot read property 'setToken' of undefined
https://i.imgur.com/hIdwVds.png

{   TypeError: Cannot read property 'setToken' of undefined
  
  - server-bundle.js:5480 Store.updateToken
    server-bundle.js:5480:19
  
  - vuex.common.js:706 Array.wrappedActionHandler
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:706:23
  
  - vuex.common.js:428 Store.dispatch
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:428:15
  
  - vuex.common.js:334 Store.boundDispatch [as dispatch]
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:334:21
  
  - vuex.common.js:636 local.dispatch
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:636:20
  
  - server-bundle.js:5531 Store.fetchToken
    server-bundle.js:5531:15
  
  - vuex.common.js:706 Array.wrappedActionHandler
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:706:23
  
  - vuex.common.js:428 Store.dispatch
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:428:15
  
  - vuex.common.js:334 Store.boundDispatch [as dispatch]
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:334:21
  
  - vuex.common.js:636 local.dispatch
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:636:20
  
  - server-bundle.js:5545 Store.fetch
    server-bundle.js:5545:13
  
  - vuex.common.js:706 Array.wrappedActionHandler
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:706:23
  
  - vuex.common.js:428 Store.dispatch
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:428:15
  
  - vuex.common.js:334 Store.boundDispatch [as dispatch]
    [ra-front-simple-nu]/[vuex]/dist/vuex.common.js:334:21
  
  - server-bundle.js:5406 module.exports.__webpack_exports__.a
    server-bundle.js:5406:23
  
  - server-bundle.js:4005 createApp
    server-bundle.js:4005:207
  
  - next_tick.js:228 process._tickDomainCallback
    internal/process/next_tick.js:228:7
  
 statusCode: 500, name: 'TypeError' }```
  

<!--cmty--><!--cmty_prevent_hook-->
<div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt-community/auth-module/issues/c23">#c23</a>)</em></sub></div>

Different guards for auth

Hey! I need to have different guards for auth, like in Laravel (php). For example: I have site, when I need an authenticate user, and I have an admin panel, but in admin I need new middleware of auth to check permissions to see admin panel. May be package has this functionality already, but I didn't find it.

Please, give me some example or something to help me solve this problem. Thanks!

This question is available on Nuxt.js community (#c30)

Reset Axios token/header on reset/logout

Hi agian,

When the user logs in auth module sets the headers in axios with the authentication header which is cool but when the user logs out, the reset() method does not empty/reset the header, so unless the page is refreshed the user is still logged in when making api requests

This question is available on Nuxt.js community (#c40)

After logging out, middleware goes into a never ending loop

After logging out it hits the following middleware:

middleware.auth = function authMiddleware ({ store, redirect }) {
// If user not logged in, redirect to /login
if (!store.getters['auth/loggedIn']) {
return redirect('/login')
}
}

However after calling redirect, it hits the middleware again and again, causing the page to get stuck in a loop.

This question is available on Nuxt.js community (#c29)

fetchUser is called while fetchUserOnLogin is set to false

Set nuxt.config.js:

auth: {
  fetchUserOnLogin: false,
  endpoints: {
    login: 'api/oauth2/token',
    method: 'post',
    propertyName: 'access_token'
  }
}

Do this.$auth.login.
Get error http://localhost:3000/api/auth/user 404 (Not Found)
Also get 200 response and save data, (but not token), to auth module.

This question is available on Nuxt.js community (#c42)

Expected login response

Hi,

What is the expected login response format?

I can see a correct call on my API when trying to log in.
My API returns the token in both header and body, but the auth/loggedIn stays at false:

state
   auth:Object
   token:undefined
   user:null
getters
   auth/loggedIn:false
mutation
   payload:undefined
   type:"auth/SET_TOKEN"

Response Header:

Date: Mon, 29 Jan 2018 09:31:48 GMT
Server: Apache/2.4.10 (Debian)
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IkZMeFlMQVhxaHd6KzE2cm1FbjB0NmJJd3pNcCt4aHl6.....

Response Body:

²{
    "status": "success",
    "data": {
        "id": 1,
        "name": "username"
    },
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSU..."
}

Thanks !

This question is available on Nuxt.js community (#c34)

$axios is not available

Hello guys,

Someone faced this error on nuxt ? I've added the 2 modules to nuxt.config.js and the auth module return me this error with !this.app.$axios...

Thanks for your response..

NeOMakinG

This question is available on Nuxt.js community (#c43)

error with nuxtjs next version

With nuxt next version installed this module produce an error in SSR.

In my nuxtServerInit method, im calling:

await dispatch('auth/fetch')

Error:
Error: TypeError Cannot read property 'req' of undefined

ch_node_local_1  | Tue, 19 Dec 2017 07:25:57 GMT nuxt:render error occurred when calling nuxtServerInit:  Cannot read property 'req' of undefined
ch_node_local_1  | {   TypeError: Cannot read property 'req' of undefined
ch_node_local_1  |   
ch_node_local_1  |   - server-bundle.js:8513 Store.fetchToken
ch_node_local_1  |     server-bundle.js:8513:64
ch_node_local_1  |   
ch_node_local_1  |   - vuex.common.js:706 Array.wrappedActionHandler
ch_node_local_1  |     [app]/[vuex]/dist/vuex.common.js:706:23
ch_node_local_1  |   
ch_node_local_1  |   - vuex.common.js:428 Store.dispatch
ch_node_local_1  |     [app]/[vuex]/dist/vuex.common.js:428:15
ch_node_local_1  |   
ch_node_local_1  |   - vuex.common.js:334 Store.boundDispatch [as dispatch]
ch_node_local_1  |     [app]/[vuex]/dist/vuex.common.js:334:21
ch_node_local_1  |   
ch_node_local_1  |   - vuex.common.js:636 local.dispatch
ch_node_local_1  |     [app]/[vuex]/dist/vuex.common.js:636:20
ch_node_local_1  |   
ch_node_local_1  |   - server-bundle.js:8533 Store.fetch
ch_node_local_1  |     server-bundle.js:8533:7
ch_node_local_1  |   
ch_node_local_1  |   - vuex.common.js:706 Array.wrappedActionHandler
ch_node_local_1  |     [app]/[vuex]/dist/vuex.common.js:706:23
ch_node_local_1  |   
ch_node_local_1  |   - vuex.common.js:428 Store.dispatch
ch_node_local_1  |     [app]/[vuex]/dist/vuex.common.js:428:15
ch_node_local_1  |   
ch_node_local_1  |   - vuex.common.js:334 boundDispatch
ch_node_local_1  |     [app]/[vuex]/dist/vuex.common.js:334:21
ch_node_local_1  |   
ch_node_local_1  |   - server-bundle.js:8164 Store.nuxtServerInit
ch_node_local_1  |     server-bundle.js:8164:11
ch_node_local_1  |   
ch_node_local_1  |   - next_tick.js:188 process._tickCallback
ch_node_local_1  |     internal/process/next_tick.js:188:7
ch_node_local_1  |   
ch_node_local_1  |  statusCode: 500, name: 'TypeError' }
This question is available on Nuxt.js community (#c19)

TypeError: Cannot assign to read only property 'message' of object ''

Set this module, try did this from readme:

this.$store.dispatch('auth/login', {fields: {username:'username', password:'password'}})

but when response data in console display this error:

TypeError: Cannot assign to read only property 'message' of object ''

From server i send data in format:

    let user = {
      id: 1,
      username: 'ADMIN'
    }
    let token = 'token'
    ctx.body = {user, token}

What's wrong?

This question is available on Nuxt.js community (#c25)

Login redirect not working, $auth.state.loggedIn false

In my login.vue submit method I have:

this.$auth.login({ data: this.form })
The correct endpoint is reached with the right values, a token is returned and saved correctly to localStorage. A follow up request to /user endpoint also executes successfully. All subsequent requests include the correct Authorization header.

However:

  • there is no redirect to the home page after login
  • $auth.state.loggedIn and $auth.state.user are both false/null, all secure pages (using middleware['auth']) redirect to login
    It appears that the only thing working is the authorization header, vuex state is not being updated correctly.
This bug report is available on Nuxt.js community (#c44)

Add domain option for cookie

Hi,

It's possible to add an option "domain" for the cookie please ?
Example :
cookie: { name: 'token', options: { domain: '.example.com' } }

With this option, the cookie is valid for all subdomains (like : www.example.com, example.com and other.example.com).

Thx :)

This question is available on Nuxt.js community (#c48)

Merging 'endpoints'

Currently, _request function in auth.class.js uses Object.assign to merge this.options.endpoints[name] and endpoint.

const opts = Object.assign({}, this.options.endpoints[name], endpoint)

In my use case, I need to add some headers and a propertyName to my request.
Adding these values to nuxt.config.js doesn't work.
Adding them in this.$auth.login({...}) works.

I think that it might be because Object.assign uses shallow merge. I suggest swapping it for deep merge.

This bug report is available on Nuxt.js community (#c45)

cannot change 'Content-Type'

I'm trying to change Content-Type to application/x-www-form-urlencoded; charset=UTF-8 in nuxt.config.js

I use @nuxtjs/axios and @nuxtjs/auth.

I've tried modifying the headers.common by the axios config object in the requestInterceptor and transformRequest methods but nothing.

Thanks

This question is available on Nuxt.js community (#c11)

Social Networks log in

Hello @pi0
I'm developing a Nuxt.js that has a Backend with user/pass, Goolge or Facebook authentication.

  • Do you recomend to use vue-authenticate for the social network login?
  • Are you planning to implement something similar so I can use only this library?
  • Do you suggest to use this same library as it is to get the job done?

Thanks!

This question is available on Nuxt.js community (#c12)

Middleware is not working

I do login process and all state is already set:
screenshot_8
login page middleware is 'no-auth' and '/' path is 'auth'. After login, I redirect a user from '/login' to '/'. It works for the first time and I can see '/' page. But If I refresh the page I will redirect to '/login'. After this, if you check Vuex with the devtool user is still loggedIn. It seems middleware is not working fine!

This question is available on Nuxt.js community (#c28)

Automatic login and logout redirection ignores page guarded state

Originally reported by @pi0 🎆

watchLoggedIn () {
    this._loggedInWatcher =
      this._loggedInWatcher ||
      this.$store.watch(
        state => state[this.options.namespace]['loggedIn'],
        () => {
          this.redirect('home')
        }
      )
    return this._loggedInWatcher
}

State watcher ignores completely about the current page guarded state and will automatically redirect you to login page even if you current page is not guarded by authentication.

This bug report is available on Nuxt.js community (#c37)

loggedIn set to false after refresh

loggedIn is stored in the store (vuex) and so when i refresh the page i am logged out because i suppose loggedIn is set to false by default unless set to true after a successful login

Shouldn't LoggedIn be stored the same way the token is (cookie, localStorage)? or maybe set to true if token exists on load automatically?

If not then what is the recommended method for persistent session

This question is available on Nuxt.js community (#c38)

laravel passport example

Is there anyone who is willing to share/show a full example of this with Laravel Passport?
I mean like a repository or even a small tutorial about it all?

Sorry for my n00bity here but I think this would help many people like me.

This question is available on Nuxt.js community (#c18)

Redirect on login/logout

I expect this is already on the todo list but it would be good to be able to pass a url/route to redirect to after login so that the user can be directed to the page they initially tried to access.

This feature request is available on Nuxt.js community (#c8)

Global middleware with exceptions

It would be useful to be able to add this as a global middleware and add some exceptions. I'm using it it to locked down a cms backend, so all pages should have the auth middleware except the /login page and it would be quicker to add it globally rather than on every page

This question is available on Nuxt.js community (#c4)

auth middleware not working on logout when / is guarded

After i call logout, loggedIn Watcher automatically redirects me to {home: /} but home is guarded by the middleware and should redirect to "/login" but it doesn't
the bug is as follows:

when it doesn't work:

  • i am logged in and at "/"
  • i logout
  • page redirects to "/" which is the same page so the middleware doesn't get called i guess?

when it does:

  • if i am logged in and at "/about"
  • i logout
  • i get redirected to "/login" (redirected to "/" and then automatically to "/login")
This question is available on Nuxt.js community (#c39)

fetch phase keep pending on chrome / adonisjs as backend

this is header of request localhost:3333/api/v1/fetch:

Provisional headers are shown
Accept:application/json, text/plain, */*
Authorization:Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjEsImlhdCI6MTUxNjc4NjY4N30.fgCRXOFkSkhVs49sn0TXWqMTE_0YcTBYtf5AysEn_zQ
Referer:http://localhost:3333/auth/login
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
X-XSRF-TOKEN:c8f698866ef92757d689f94a7d429a00gmGgA9BSIC0OwQEntwQ/ZEWA4EnfRfldKeRS7bqIzY5mSHbwYpboJV4FsM6+w2qqf19cmMxPJArVSN9m5VwQekEch2sckKC97l5CsVemXSg+u5aN1+3QUHi91w3W7ZZS

and this is user fetch action in UserController.js:

async fetch({ auth, response }) {
    try {
      return await User.query()
        .where('id', auth.current.user.id)
        .with('profile')
        .fetch()
    } catch (error) {
      return response.status(501).send(error.message)
    }
  }

but if i terminate this request and refresh page it will be worked

This question is available on Nuxt.js community (#c33)

axios setToken

Hello, this is an improvement request (sorry for my english). In the updateToken action you can use the setToken method of axios module.

Example:
if (token) { this.$axios.setToken(token, 'JWT') } else { this.$axios.setToken(false) }

In my example i use 'JWT' but this type can be defined in options.

This question is available on Nuxt.js community (#c7)

Auth using oauth requires me to refresh the page, redirects don't seem to work

My nuxt config:

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
  ],

  auth: {
    redirect: {
      login: '/admin',
      home: '/admin/videos',
    },
    endpoints: {
      user: { url: '/me', method: 'get', propertyName: 'data' },
      logout: { url: '/logout', method: 'get', propertyName: 'data' },
    },
  },

I have OAUTH setup via my API using a popup, I have the login process actually pass the successful login from the popup via localStorage, using methods like this

    oauthComplete (result) {
      if (process.SERVER_BUILD) return
      window.localStorage.setItem('br', JSON.stringify(result))
      this.login(result.user)
    },

    async login (user) {
      this.$auth.login({data: user})
    },

This all works great except for when i run $auth.login and $auth.logout.. it's not reactive or not redirecting/reloading, I have to refresh the page myself for it to work.

This question is available on Nuxt.js community (#c36)

post logout

The logout action can receive a param for logout method because in many apis the logout is by POST

This question is available on Nuxt.js community (#c3)

How to use refresh_token?

I don't know if this is possible, but I would like to refresh tokens when they expire. In my application, when a user logs in, he gets an access_token and a refresh_token, but using the current module I think it's not possible to store the refresh_token.

Is there any event that gets fired when the user logs in? Is there any plan to also set a property to store the refresh token? Is there any way of doing it with the current version?

This question is available on Nuxt.js community (#c51)

yarn generate now has errors for every route

I have the auth module only being used in the /admin/ section of my site. After implementing it when I yarn generate I get this error for every route:

 Generate errors summary:

 ROUTE  /merchandise

  TypeError: Cannot read property 'url' of undefined

  - server-bundle.js:3999 Auth.get isAPIRequest [as isAPIRequest]
    server-bundle.js:3999:30

  - server-bundle.js:3812 module.exports.__webpack_exports__.a
    server-bundle.js:3812:13

  - server-bundle.js:1590 createApp
    server-bundle.js:1590:207

ex:

image

This bug report is available on Nuxt.js community (#c46)

Access auth-module state in other plugin

I have a plugin and I want to access logged in user. Something like this (example):

import Vue from 'vue'
import store from '~/store'

let username = store.state.user.username
This question is available on Nuxt.js community (#c26)

The client-side rendered virtual DOM tree is not matching server-rendered content

Hi @pi0

I have an hybrid site which uses a cookie and also a PHP session, the module do its job when working from Nuxt but some pages are still in PHP and the user can log out from them.

The thing is that when they log out from the PHP site the session and the cookie are destroyed but when I go back to the Nuxt site I can see that from the SSR it comes loggedIn false but client side renders loggedIn true so Vue throws this warning.

What could be a good approach? Using the fetch method?

Thanks

This question is available on Nuxt.js community (#c17)

Config format

Hi, I'm loving the changes for 4.0, but I feel the config structure could use a little work to better group options. I was thinking about structuring the options based on the 'actions' (login, logout, fetch user - a bit like v3), but rolling in the redirects with each action - for me there is a bit of confusion about how the redirects work, and thought something like this would be a bit more explicit to configure. Default options could look something like this:

module.exports = {
  login: {
    endpoint: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
    autoFetchUser: true,
    redirect: '/',
    rewriteRedirect: true
  },
  logout: {
    endpoint: { url: '/api/auth/logout', method: 'post' },
    redirect: '/login',
    autoClearHeader: true
  },
  fetch_user: {
    endpoint: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
  }
  resetOnError: false,
  watchLoggedIn: true,
  namespace: 'auth',
  scopeKey: 'scope',
  token: {
    type: 'Bearer',
    name: 'token'
  },
  cookie: {
    name: 'token',
    options: {
      path: '/'
    }
  }
}

I added an autoClearHeader option to the logout action (which would be the logical place to configure a fix for #57). I'm not 100% sure what watchLoggedIn actually does, but that could be moved to the login and/or logout options... Anyway, thought I would throw this out there!

This question is available on Nuxt.js community (#c49)

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

This question is available on Nuxt.js community (#c1)

Enable Cookie expiration time option

Hi!

Can we have a little neat feature that would allow us to provide an expiration time for the token cookie?

It could look little something like this:

token: { enabled: true, type: '', localStorage: false, name: 'token', cookie: true, cookieName: 'token', cookieExpire: 1 }

and in auth.store.js

if (token) { console.log('Token: ', token) Cookies.set('<%= options.token.cookieName %>', token, { expires: <%= options.token.cookieExpire %> }) } else { Cookies.remove('<%= options.token.cookieName %>') }

Without having this option, the store sets the cookie for session only.

What do You think?

This feature request is available on Nuxt.js community (#c27)

Not being redirected after login/logout

Hello,

I'm not being redirected after I login or logout. If I refresh the page, the middleware seems to kick in and redirect me to the right place, but shouldn't it redirect me after I run the dispatches?

Here's an example for my logout:

    async logout () {
      await this.$store.dispatch('auth/logout')
    }

My (auto-generated) auth.middleware.js is as follows:

middleware.auth = function authMiddleware ({ store, redirect }) {
  // If user not logged in, redirect to /login
  if (!store.getters['auth/loggedIn']) {
    return redirect('/users/login')
  }
}

middleware['no-auth'] = function noAuthMiddleware ({ store, redirect }) {
  // If user is already logged in, redirect to /
  if (store.getters['auth/loggedIn']) {
    return redirect('/books/collection')
  }
}

And I have them included in my nuxt.config.js:

  router: {
    middleware: [
      'auth',
      'no-auth'
    ]
  },

  auth: {
    user: {
      endpoint: 'auth/user',
      propertyName: '',
      resetOnFail: true
    },
    login: {
      endpoint: '/auth/login'
    },
    logout: {
      endpoint: '/auth/logout',
      method: 'GET'
    },
    redirect: {
      notLoggedIn: '/users/login',
      loggedIn: '/books/collection'
    },
    token: {
      enabled: true,
      type: 'Bearer',
      localStorage: true,
      name: 'token',
      cookie: true,
      cookieName: 'token'
    }
  },

Shouldn't I be redirected to /users/login after clicking the logout button?

This feature request is available on Nuxt.js community (#c15)

Instructions

Are there any usage instructions anywhere for this yet?

This question is available on Nuxt.js community (#c2)

bug on reload home page

bug

bug2

When you reload the home page (after authentication), the route goes to login page and forward to home page. the problem is that login layout not changes and the home page stay with it, in the console i have warning:

VM2698:34 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

This bug report is available on Nuxt.js community (#c41)

Waiting for user fetch?

Problem is following.
If u use this module with any route protection ( like a buildin middleware auth/no-auth) if you reload page on the protected page it will redirect you to the unprotected path because fetching user info not yet finished.
How to protect path so they work properly on reload, e.g. it should wait for auth-module to complete it fetch user request before deciding anything. But i dont see a way for this using auth-module. I dont even see a way to tell if fetching already failed and user not auth or its not yet finished fetching..
Am i missing something?

This question is available on Nuxt.js community (#c20)

Middleware ignoring setting in nuxt.config.js

auth.middleware.js is not using the value supplied in nuxt.config.js:

middleware.auth = function authMiddleware ({ store, redirect }) {
  // If user not logged in, redirect to /login
  if (!store.getters['auth/loggedIn']) {
    return redirect('/login')
  }
}

/login should be the value of auth.redirect.notLoggedIn fdromthe

The same applies for the no-auth middleware

This question is available on Nuxt.js community (#c10)

Cannot run generate after adding auth-module

success
modules: [ '@nuxtjs/axios', '@nuxtjs/font-awesome' ]
error
modules: [ '@nuxtjs/auth', '@nuxtjs/axios', '@nuxtjs/font-awesome' ]

error detial

$ nuxt generate
nuxt:generate Generating... +0ms
nuxt:axios BaseURL: http://localhost:3000/api (Browser: /api) +0ms
nuxt:build App root: /Users/mymac/PycharmProjects/superEye/ui +0ms
nuxt:build Generating /Users/mymac/PycharmProjects/superEye/ui/.nuxt files... +1ms
nuxt:build Generating files... +9ms
nuxt:build Generating routes... +7ms
nuxt:build Building files... +42ms
Build completed in 21.421s

Hash: f7902469f1b8aa463ff4
Version: webpack 3.10.0
Time: 21426ms
Asset Size Chunks Chunk Names
pages/index.d1cab7fbbca685d7e78d.js 3.64 kB 1 [emitted] pages/index
img/fontawesome-webfont.912ec66.svg 444 kB [emitted] [big]
fonts/fontawesome-webfont.674f50d.eot 166 kB [emitted]
fonts/fontawesome-webfont.fee66e7.woff 98 kB [emitted]
fonts/fontawesome-webfont.af7ae50.woff2 77.2 kB [emitted]
pages/login.d8e4eb9aec06b2ff5abd.js 1.81 kB 0 [emitted] pages/login
fonts/fontawesome-webfont.b06871f.ttf 166 kB [emitted]
layouts/default.52a206c2e6098748a301.js 991 bytes 2 [emitted] layouts/default
common.da1a1b01e47a1c75e55e.js 143 kB 3 [emitted] common
app.fcda0e152eb49d35c9c6.js 590 kB 4 [emitted] [big] app
manifest.f7902469f1b8aa463ff4.js 1.64 kB 5 [emitted] manifest
LICENSES 880 bytes [emitted]

  • 9 hidden assets

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (300 kB).
This can impact web performance.
Assets:
img/fontawesome-webfont.912ec66.svg (444 kB)
app.fcda0e152eb49d35c9c6.js (590 kB)
Hash: 668529741ae53996429f
Version: webpack 3.10.0
Time: 6104ms
Asset Size Chunks Chunk Names
server-bundle.json 1.04 MB [emitted]
nuxt:generate Destination folder cleaned +0ms
nuxt:generate Static & build files copied +25ms
Generating routes
nuxt:render Rendering url / +0ms
nuxt:render Rendering url /login +227ms
{ Error: ENOENT: no such file or directory, lstat '/Users/mymac/PycharmProjects/superEye/ui/dist/index.html'
at Error (native)
errno: -2,
code: 'ENOENT',
syscall: 'lstat',
path: '/Users/mymac/PycharmProjects/superEye/ui/dist/index.html' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This bug report is available on Nuxt.js community (#c22)

fetch user object type

the fetch action commit the property 'user' in userData but in my case the api return the user object directly in userData, maybe we need an option for this.

Thank you for this module, it's excellent.

I want to be a contributor to fix these issues, I send the pull request directly?

This question is available on Nuxt.js community (#c5)

Add extra token variable name / make it definable

I'm using Laravel Passport for backend auth which supplies the token under the variable access_token which isn't picked up by the module. I had to modify templates/auth.store.js to make it work:

...
let token = tokenData.token || tokenData.is_token || tokenData.access_token
...

This is a similar issue to this one, maybe we need a way to set module settings??

This question is available on Nuxt.js community (#c6)

Adonuxt support for serverMiddleware

in your demo, you have given serverMiddleware:['../api/auth'] which is express app, but i am using it with Adonuxt project.. and not sure how to configure serverMiddleware... though client working fine.. problem happens when manually fresh hitting f5.. it send me to login page even if authenticated.

This question is available on Nuxt.js community (#c47)

user data null when loggedIn getter is true

@pi0
I have a header which shows user data when user is loggedIn but as the time the loggedIn value change and the component renders the user data is not already fetched so it gives and user undefined attribute so to show user data I have to check if user is defined or not.

As the user endpoint is required, what if the loggedIn is consider if token (in case of enabled) and user data are defined?

This question is available on Nuxt.js community (#c14)

[Issue] Routing breaks after adding Middleware

I'm having an issue after implementing this bundle into my project. My routing breaks after adding the following to my nuxt.config.

  router: {
    middleware: [
      'auth', // If user not logged in, redirect to '/login' or to URL defined in redirect property
      'no-auth' // If user is already logged in, redirect to '/' or to URL defined in redirect property
    ]
  },

After adding that any links within my project no longer work, for example clicking the following will start the loading bar but when complete it goes nowhere:

        <v-list-tile to="/help">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>
              {{ item.title }}
            </v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>

But if I remove the router { middleware }} part from my config, routing works again, however the Auth part then breaks. These other links are using the pages route format i.e /pages/help/index.vue .

I've tried to narrow it down to this bundle by adding my own middlewares to the middleware directory. These do not break the rest of the routing system (When all referencer to this bundle is removed).

Any pointers would be much appreciated.

This question is available on Nuxt.js community (#c24)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.