Can't set user session with Vue and Django

Question

I have the Vue app and the Django rest framework api separately. One on localhost:8080 (vue app) and the rest api on localhost:8000.

So, I created an APIView that is supposed to log the user in when they make a post request:

class LoginUserAPIView(APIView):
    permission_classes = () # login should be accessed by anyone, no restrictions.
    def post(self, request, format=None):
        username = request.data['username']
        password = request.data['password']

        user = authenticate(username=username, password=password)

        if user is not None:
            login(request, user)
            user = UserSerializer(user)
            return Response({'success': 'Logged in', 'user': user.data})
        return Response({'wrong': 'username or password not correct, try again'}, status=status.HTTP_401_UNAUTHORIZED)

And I was trying to get the user session from django with axios:

login() {
      this.isLoading = true;
      return axios({
        method: 'post',
        url: 'http://localhost:8000/api/login_user',
        data: {
          username: this.name,
          password: this.password
        },
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        this.$store.commit('loginAuth', true); // setting isAuth to true in vuex store.
        this.$store.commit('setUser', response.data.user); // to access the user object since I don't use django templates
        this.$router.push({name: 'page'}); // redirect to random test page that requires authorization so I can see if everything went fine.
      })
      .catch(err => {
        console.error(err);
        if (err.response.status == 401) {
          alert(err.response.data.wrong);
          this.isLoading = false;
        }
      })

but I was naive and I thought this would work, so when I checked the vue app for any cookies or sessions, nothing.

How could I set user session for a separate vue app?

Thanks in advance, I apologize for my lack of knowledge.

I guess that the origin is not considered the same because the port is different so you cannot set cookies or sessions. Both domain, protocol and port must match. You should respond from your server at least temporarily since it is in development with headers that allow the request from any origin — gijoe, Sep 20 '18 at 15:56
This isn't an Origin issue as much as it is a stateful authentication problem. You're logging them in through axios, sure. However, your session makes no difference because you're using an API. What you want to use is something like a `JWT` token with `claims`, and store the token on the client side to be reused for further requests until it's expiry. — Ohgodwhy, Sep 20 '18 at 15:58
Just a reminder: `this.$store` is your Vuex store, not the localStorage of the browser. Also, the common way with Vuex is to use actions to trigger commits to modify the state, not accessing the commits directly. — Bennett Dams, Sep 20 '18 at 16:00
Actually, yes, since I'm also getting the user object through API. That was the main reason I wanted to use django user session, wow, I'm dumb. Also, yes, that's why after refresh I keep losing the user object, vuex store is not persistent. One more question, would you recommend vue-session package? And the last thing I'm worried about is forms and csrf_token. Django has done all the job for me everytime, so I'm not sure how I would do it through an API. Thank you very much. — yierstem, Sep 20 '18 at 16:04

Can't set user session with Vue and Django

0 Answers0