Laravel Passport middleware protected routes "Unauthenticated" problem

Also logged in user seeing pages only auth user can see.

How are you doing this? If the user can see what auth user can see, which means you are making GET request with auth token right? If you're using a passport, you should put the token into your Authorization header.

axios.defaults.headers.common.Authorization = `Bearer ${token}`;

Use this to put the token into your all axios request after you have login, then you should be good to go.

In Login Component use

methods: {    login() {      var instance = axios.create({        baseURL: "http://apiendpoint.com/api/"      });      instance        .post("/admin-login", {          email: this.username,          password: this.password,          device_type: "Web",          device_token: "Web"        })        .then(response => {          // console.log(response);          localStorage.setItem("token", response.data.data.token);          this.$router.push("/");        })        .catch(error => {          console.log(error);        });    }  },

Then define the axios configuration in a file as Repository.js which can be used with all resources.

/******************** Repository js ****************/import axios from "axios";import router from "./router";const baseDomain = "http://apiendpoint.com/api/";const baseURL = `${baseDomain}/api`;const api = axios.create({    baseURL, // headers: {    //  'Authorization': 'Bearer ' + localStorage.getItem('api_token')    // },    validateStatus: function(status) {        if (status == 401) {            router.push("/login");        } else {            return status;        }    }});api.interceptors.request.use(    function(config) {        const token = localStorage.getItem("token");        if (token == null) {            console.log("Token Is empty");            console.log("Redirecting to Login");            router.push({ name: "login" });        }        if (token) {            config.headers.Authorization = `Bearer ${token}`;        }        return config;    },    function(response) {        return response;        console.log(response);    },    function(error) {        console.log(error);        return error;    });// Add a response interceptorapi.interceptors.response.use(    function(response) {        // Do something with response data        return response;    },    function(error) {        // Do something with response error        console.log("Error Found");        return Promise.reject(error);    });export default api;

And define all vue routes in Router.

If you are simply Consuming your api with javascript I would suggest adding the CreateFreshApiToken middleware to your web middleware group.

From the docs:

'web' => [    // Other middleware...    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,],

Otherwise, as others have stated, make sure to include the Authorization header and Content-Type header in your request.