NeXTSTEP Programming Mastermind

    @giliweb/quasar-app-extension-http-authentication

    1.0.3 • Public • Published

    Quasar App Extension - Http Authentication

    This app extension provides http authentication functionality by using a Vuex store.

    Dependencies

    Both axios as well as Vuex are required for this extension.

    Install

    quasar ext add http-authentication

    Quasar CLI will retrieve it from NPM and install the extension.

    Prompts

    The installation prompts for the routes which should be used to communicate with the backend. The requests and responses of the server should match with this extension.

    There are multiple authentication schemes (https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication). This app extension was originally created for the Bearer scheme.

    Layout

    The extension comes with a basic menu for login, register and logout actions. Have a look at the test app.

    Functionality

    The authentication logic is performed inside a Vuex store. this.$auth provides a helper to access the functionality in the store.

    Function Functionality
    $auth.register(data) Makes a POST request to the registration route with data as body
    $auth.login(data) Makes a POST request to the login route with data as body. Saves the returned token in a cookie
    $auth.logout() Logs out the current user and removes the Authorixation cookie
    $auth.verify(token) Makes a GET request to the verification route with token as URL parameter
    $auth.passwordForgot(data) Makes a POST request to the password forgot route with data as body.
    $auth.passwordReset(data) Makes a POST request to the password reset route with data as body.
    $auth.loggedIn() Returns a boolean to determine if the user is logged in.
    auth.check(roles) Checks if the user belongs to roles by checking if they are included in user.roles.
    $auth.setToken(token) Sets the Authorization header depending on the used scheme.
    $auth.fetch() Fetch the user belonging to the Authorization token from the backend
    $auth.user() Returns the current user.

    If you require the user object to have a specific structure or you need to perform an action upon logging in you can use the following in the prefetch function of App.vue:

    /**
     * Custom user data
     */
    store.commit('auth/setUserData', (data) => { return { id: data.id } })
    
    /**
     * Login callbacks
     */
    store.commit('auth/addLoginCallback', () => console.log('Custom login calback'))

    Have a look at the pages to see how the functions are used internally.

    Notes

    Note that an existing axios boot file will be overwritten. If you require support for additional http authentication schemes, please open an issue.

    Currently both a .ts and .js file is rendered into your app. You will have to delete the one which is not used in your application.

    Uninstall

    quasar ext remove http-authentication

    Contribute

    PR's for extra languages are appreciated (src/components/lang).

    Donate

    If you appreciate the work that went into this App Extension, please consider donating to Quasar.

    Keywords

    none

    Install

    npm i @giliweb/quasar-app-extension-http-authentication

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    617 kB

    Total Files

    78

    Last publish

    Collaborators

    • giliweb