Блог

я разработал api,который принимает авторизацию(токен на предъявителя, который содержит заголовок.полезная нагрузка.подпись) в заголовках для сброса пароля, он отлично работает в postman, теперь я хочу подключить свой api к интерфейсному интерфейсу (vue.js) как передать этот токен авторизации в URL-адрес интерфейса на основе этого я хочу обновить свой пароль, я пытался передать этот токен по URL-адресу, но это не работает, как исправить эту проблему

api.php

 Route::group([
    'middleware' => 'api',
    'prefix' => 'auth'
], function ($router) {
    Route::post('/login', [UserController::class, 'login']);
    Route::post('/register', [UserController::class, 'register']);
    Route::post('/sendPasswordResetLink', 'AppHttpControllersPasswordResetRequestController@forgotPassword');
    //Route::get('/email/verify/{id}',[VerificationController::class,'verify']);
    Route::post('/resetPassword', 'AppHttpControllersChangePasswordController@resetPassword');

});
 

ResetPasswordNotification.php [It's under in notifications directory]

 <?php

namespace AppNotifications;

use IlluminateBusQueueable;
use IlluminateNotificationsMessagesMailMessage;
use IlluminateNotificationsNotification;
use IlluminateSupportFacadesLang;


class ResetPasswordNotification extends Notification
{
    use Queueable;

    public $token;
    


    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct($token)
    {
        $this->token = $token;
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return ['mail'];
    }

    /**
     * Get the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return IlluminateNotificationsMessagesMailMessage
     */
    public function toMail($temp)
    {
//http://localhost:8000/reset --> This is my frontend url
        $url = url("http://localhost:8000/reset/$this->token");
        return (new MailMessage)
                    ->subject(Lang::get('Reset Password Link!'))
                    ->line(Lang::get('You are receiving this email because we received a request for password reset'))
                    ->line(Lang::get('Copy the token'))
                    ->with($this->token)
                    ->action('Reset Password',url($url))
                    ->line('If you did not request a password reset, no further action is required!');
                   
    }

    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toArray($notifiable)
    {
        return [
            //
        ];
    }
}

 

ChangePasswordController.php[APi]

 <?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppHttpRequestsUpdatePasswordRequest;
use SymfonyComponentHttpFoundationResponse;
use IlluminateSupportFacadesDB;
use AppModelsUser;
use AppModelsPasswordReset;
use IlluminateSupportFacadesValidator as FacadesValidator;

class ChangePasswordController extends Controller
{
    public function resetPassword(Request $request)
    {
        $validate = FacadesValidator::make($request->all(), [
            'new_password' => 'min:6|required|regex:/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^amp;*-]).{6,}$/',
            'confirm_password' => 'required|same:new_password'
        ]);

        if ($validate->fails()) {
            return response()->json(['message' => "Password doesn't match"]);
        }
        $passwordReset = PasswordReset::where([
            ['token', $request->bearerToken()]])->first();
        
            if (!$passwordReset) {           
            return response()->json([ 'message' => 'This token is invalid'], 201);
            }
        $user = User::where('email', $passwordReset->email)->first();
        
        if (!$user) {
            return response()->json(['message' => "we can't find the user with that e-mail address"], 201);
        } 
        else {
            $user->password = bcrypt($request->new_password);
            $user->save();
            $passwordReset->delete();
            return response()->json(['data'=>'Password has been updated.'],Response::HTTP_CREATED);
        }
    }
}

 

Vue.js код

router.js

  {
            path:'/reset',
            component:Reset
        }  
 

Reset.vue

 <template>
    <div class="main">
        <div class="heading">
        <h3 class="ResetContent"> Reset Password</h3>
    </div>
    <div class="container">
        <form @submit.prevent="">
            <div class="New-section">
                <p class="newPassword">NewPassword</p>
                <input type="password"  class="passwordbox" autocomplete="off" required v-model="newPassword" id="password-input" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?amp;])[A-Za-zd@$!%*?amp;]{6,}$" >
            </div>
            <div class="confirm-section">
                <p class="confirmPassword">confirmPassword</p>
                <input type="password"  class="passwordbox" autocomplete="off" required v-model="confirmPassword" id="confirm-input" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?amp;])[A-Za-zd@$!%*?amp;]{6,}$" >
            </div>
            <div class="btn-section">
                <button type="submit" id="btn-group" @click="handlesubmit();">Update</button>
            </div>
        </form>
    </div>
    </div>
</template>
<script>
import service from '../service/User'
export default{
    name:'Reset',
    data(){
        return{
           newPassword:'',
           confirmPassword:'',
           title:'Reset Password',
           newPasswordContent:'NewPassword',
           confirmPasswordContent:'confirmPassword'
        }
    },
    methods:{
        handlesubmit(){
            let userData={
                newPassword:this.newPassword,
                confirmPassword:this.confirmPassword
            }
            service.userReset(userData).then(response=>{
                alert("password updated successfully");
                return response;
            }).catch(error=>{
                alert("password not match");
                return error;
            })
        }
    }
}
</script>
<style lang="scss" scoped>
@import "@/styles/Reset.scss";
</style>