Hide Link based on user roles - InertiaJS + ReactJS

I have a <NavLink /> component that directs the user with admin privileges to the users Index.js page. How can I hide this link from other user roles and only display it to admin privileges?

I have a Gate:: defined in HandleInertiaRequests:


public function share(Request $request)
{
        return array_merge(parent::share($request), [
                'roleCheck' => [
                       'admin' => Gate::define('is-admin', fn($user) => $user->hasAnyRole('Admin')),
            ],
        ]);
}

jlrdw

4 years ago

Level 75

I don't know all the javascript you use, but normally it's handled in an if statement, similar to a blade @if construct.

Emokores

4 years ago

Level 2

@jlrdw I have tried doing that but nothing seems to work. This is what I have implemented in my frontend:


roleCheck.cashier && (
           <NavLink href={route("admin.users.index")}
                   active={route().current("admin.users.index")}>
                   <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1"
                                        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                   </svg>
                         <span className="text-lg">Users</span>
          </NavLink>
)

Emokores

4 years ago

Level 2

@sinnbeck any ideas?

Emokores

4 years ago

Best Answer

Level 2

I actually figured it out. I had to change my Inertia middleware:


public function share(Request $request)
{
        return array_merge(parent::share($request), [
               'auth' => [
                   'admin' => $request->user() ? $request->user()->can('is-admin') : null,
               ],
        ]);
}

In the frontend .js file I had to use:


{auth.admin && (
           <NavLink
                    href={route("admin.users.index")}
                    active={route().current("admin.users.index")}
           >
                    <svg
                          xmlns="http://www.w3.org/2000/svg"
                          className="w-6 h-6"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                    >
                           <path
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
                                  strokeWidth="1"
                                  d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
                            />
                    </svg>
                          <span className="text-lg">Users</span>
             </NavLink>
)}

To make this work, I had to let inertia know I'm referring to the authenticated user.

Please or to participate in this conversation.