prashant react basic understanding..

 login karenge

email id and password .... kahan se jata hai....

jab koi bhi route dalte ho toh ten tarike se ja sakta hai...

url mein seedhe dal do  ::: no 01

ya sidebar mein link hoga tab ayega

ya npm start se automatically hota hai..

yeh kuch case hain jab request hit hoti hai...

jab yeh request hit hoti hai toh kahan jata hai............

firsltly index.js in server.....

after that two options....

if router laga hua hai toh alag alag page kholo....

nai toh bydefault app.js se seedhe route chalega....

agar swtich nai dete hain toh ek hi bar mein sare routes render ho jate hain...

exact mein check karte hain ......ki slash hi hai kya.......

agar aapne switch nai lagaya toh apke sare routes render kar dega...




..........................................................

/login se.......

swtich pehla route de dega...

exact likha hua hai...toh fir exact lega ki .....login kahan likha hai uske age kuch bhi nai lega...

ar agar slash nai lete ho...

switch mein ehl


/login se check karke login ke page par jayega

login ka page reducer ke page par kam kar raha hai..

jab hum apna email password dalte hain toh woh backend ke apicontroller par jayega...+++++

++++++++++++ kaise jayega.....

api/v1/login ...url yeh bheja backend ke liye method post bheja.....

(kiske andar mein url bhejta hoon......) global path config ke andar.....ek constant bana rakha hai....

har bar ek api bhejte ho ap us api ko bhejne ke liye apko ek api base url ki jarurat hoti hai....

kyun hoti hai.....jab hum axios call karte hain toh request kaheen toh jayegi....toh wahan par api base url dena hota hai...


api ki request jati hai apke server par....

yahan se url se 

yeh url append hota hai...

api ka url kya hai...

abhi frontend se ppoora bhejene pehle....

login ka page kholne ke liye ...sabse pehle route par 

fir srvices par jaunga..

services mein jo function bana hoga login ka


.........................



function login(email, password) {

    const subdomain =  window.location.host.split('.')[1] ? window.location.host.split('.')[0] : false;

    const requestOptions = {

        method: 'POST',

        headers: { 'Content-Type': 'application/json' },

        body: JSON.stringify( { user: { email, password, subdomain } })

    };


    return fetch(`${BASE_URL}/sign_in`, requestOptions)

        .then(handleResponse)

        .then(user => {

            // store user details and jwt token in local storage to keep user logged in between page refreshes

            console.log("User Response", user.data)

              if (user && user.status === 200) {

                localStorage.setItem('user', JSON.stringify(user.data));

              }


            return user;

        });

}


............................................


yahan se ......

rails ke ...base url par jayega....haan.....waheen par server par jakar hit  marega....

fir rails ke route par jayega  ==== kya check karega..

kaun sa controller ka method aur action route par check akrega...

ki kaun sa method aur action hai jis par mein isko bhej doon....

Imp:::::  

folders mein agar rails mein kuch dal diya toh uske liye namespace use karte hain.....

ab jis controller mein hum gaye hain(session),...usmein jis controller se inherit kar rahe hain(api)

usmein check karna hoga ki kya hai aur kahan se aya ha kya aya hai....ek abr is api controller ko bhi check kar lo ek overview le lo ki kaun kauns function ismein bane hue hain kyun ki yeh fucntion session controller mein bhi use honge.....

ab 

session controller ke create action par jakar check  karenge ek ek line ko ki kya chal raha hai ...byebug alagaakr ya fr kaise bhi...code kya and kasie likha hai usko bhi smajhenge...


/.........................................

 def create

    # begin

      return render json: {status: 401, data: {user: nil}, message: "Request Parameter not valid"} unless params[:user]

      email = params[:user][:email]

      password = params[:user][:password]

      return render json: {status: 401, data: {user: nil}, message: "The request must contain the email and password."} unless email && password

      @user = User.where(email: email).first

      # @user = User.where(email: email).first unless @user 

      return render json: {status: 401, data: {user: nil}, message: "Invalid email or password"} if @user.blank?

      return render json: {status: 401, data: {user: nil}, message: "Invalid email or password"} if not @user.valid_password?(password)

      return render json: {status: 401, data: {user: nil}, message: "Invalid email or password"} if not _is_valid_account_for_subdomain

./.........................


return means usse age nai jayega..
render means de diya...ki yeh humne kar diya hai..
render bhi multiple nai honge ek hi render hoga....

conditionwise json de raha hai yeh apko......

response mein json milti hai jab aap api bhejte ho toh...

yahan se json se data conditional ja raha hai....



project mein ek ek line neeche jata hoon aur jab khatam ho jata hai toh jahan se aya tha whaan jata hoon mein...


services connect hoga ismein backend ke sessioncontroller se...
wapas ode check akreke hum services par aye'
if successful  ;;  go to .then
if unsuccessful  :: got to catch..\

isemin catch nai likha hai toh its means...its emans error aa hi nai rahi hai....



ab yeh function jo services.js par hai....... function login...
yeh jahan se aya hai whaan par jayega....


yeh function login action se aya hai yeh isko humne action se call kiya tha....


ab mujhe har requestmein subdomain bhejna pahdhega......

step 0:   method lagaya 
  before_action :is_valid_account_for_subdomain
session controller mein..

mtheod ki definition ko api_controler mein rakh diya aur fir wahan se 
sab jagah call kara liya.....

isko helper method aban diya hai humne fir......




action se jo service se data aya hai woh data woh nikalkar reducer mein de deta hai ki mera yeh payload le jao aur daal do...

reducer mein 

actions se jab aap deipsatch kar doege toh wohsab reducer mein check karega...
woh jo key jahan apr bhi mil jayegi whan
chala jayega aepke reeducer mein......


reducer mein do parameters hote hain
state and action....
agar apke pas kuch bhi data nai hai toh aap apna data daal sakte ho.....


authentication_reducer mein hai.yeh ek function............

userService mein
history.push likha hai,,(/)
fir dashboard par chala jayega kyunki dashbaord ka link diya hai ismein yeb......





ab fir se same process hoga jo hua hai...pehle react mein check karega fir se.....


jo tum data lekar aa rahe ho...har request mein mujhe subdomain bhena hai......wahan par get karana hai ki kaunsa school hai subdomain se.....












































































Comments

Popular posts from this blog

Rails 7 Features :: Comparison with Rails 6 and Rails 5