后端返回name_利用User对象返回access_token,实现注册跳转功能

用户完成注册以后我们需要跳转到后台首页,而后台的访问是需要token的,在之前的用户登录一文中我们通过提供用户名和密码的方式来生成了token,那么对于注册而言,我们也可以使用这种方式,模拟用户登录的过程,进而获取到token。

采用这种“曲线救国”的方式估计会被经理给一通暴打,其实JWT给我们提供了另一种方式来获取token,那就是利用用户对象来获取token。

我们注册时采用的是create方式,正好返回给我们一个用户对象,我们利用这个用户对象来生成token:

public function register(UserRegisterRequest $userRegisterRequest){
  $user = User::create([
    'username'  => $userRegisterRequest->username,
    'email' => $userRegisterRequest->email,
    'password'  => Hash::make($userRegisterRequest->password)
  ]);
  event(new Registered($user));
  $token = auth('api')->fromUser($user);
  return $this->respondWithToken($token);
}

前端的register方法也要进行修改,修改后的代码为:

register({ commit }, registerForm) {
    return new Promise((resolve, reject) => {
      register({
        username: registerForm.username,
        email: registerForm.email,
        password: registerForm.password
      }).then(response => {
        const { data } = response
        console.log(data)
        commit('SET_TOKEN', data.access_token)
        setToken(data.access_token)
        resolve()
      }).catch(error => {
        const errorResponse = error.response
        console.log(errorResponse)
        switch (errorResponse.status) {
          case 422:
            // const message = getFirst(errorResponse.data.errors)
            Message({
              message: getFirst(errorResponse.data.errors)[0],
              type: 'error',
              duration: 5 * 1000
            })
        }
        reject(error)
      })
    })
  },

有一个地方需要注意的是前端是需要后端返回用户角色才能生成路由的,而新注册的用户是没有配置角色的,我们先给返回用户角色的方法中用户角色一个默认值:

public function me(){
        $user = auth()->user()->makeHidden(['created_at','updated_at','nickname']);
        $roles = $user->roles()->pluck('name');
        $roles = empty($roles) ? $roles : ['admin'];
        $user->roles = $roles;
        return response()->json([
            'code'  => 20000,
            'msg'   => '获取用户信息成功',
            'data'  => $user
        ]);
    }

给roles赋默认值时使用??是实现不了的,具体原因大家自行百度即可。

经过一系列的操作,我们用户注册后实现了前后端校验、数据入库、自动发送邮件、生成token、跳转后台首页等功能。

往期回顾

9c3eb54f2d33c4f8abbe1b003b86cc0e.png

利用事件系统在用户注册后发送邮件

17dee181770c6ba0dbee069ffc42263a.png

Laravel事件系统简介

7493ed7d2ed87f90a5cc9e210d909a8e.png

完成用户注册

693e6633843d683205ad058c5f081eb9.png

vue-element-admin捕获422状态码(其它状态码以此类推)

26cefab272c5eb20e260b37e92f835d3.png

利用Laravel请求验证注册信息

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现微信登录功能时,前端通常会经历以下几个步骤: 1. **触发登录请求**:当用户点击微信登录按钮,前端发送一个请求到后端,这个请求包含跳转到微信授权页面的URL。后端会调用微信开放平台的API生成授权链接。 ```javascript // 示例代码 axios.post('/auth/wechat', { state: Math.random() }).then(response => { const authUrl = response.data.auth_url; window.location.href = authUrl; // 跳转到微信授权页 }); ``` 2. **微信授权并回调**:用户在微信授权成功后,会跳转回应用提供的回调地址(通常是应用服务器的URL加上特定的路径),携带code参数。 3. **验证并获用户信息**:前端接收到回调后,再向后端发送code换access_token和用户信息。后端负责与微信OAuth服务器交互,获到用户数据后返回给前端。 ```javascript window.location.hash = `#access_token=${accessToken}&openid=${openid}`; ``` 这使用`hash`改变是为了避免直接暴露敏感信息,实际项目中可能需要结合后端处理。 4. **渲染用户信息**:前端解析`hash`或从后端的数据中提出用户信息,然后刷新当前页面或者使用JavaScript操作DOM,将用户信息展示出来。 ```javascript document.addEventListener('DOMContentLoaded', function() { const accessToken = location.hash.slice(1).split('&')[0].split('=')[1]; // ... 解析用户信息,如 user = JSON.parse(atob(accessToken.split('.')[1])); document.getElementById('user-info').innerText = '欢迎 ' + user.name; }); ``` 5. **定向回原页面**:由于我们在回调时已经改变了页面结构,所以不需要额外的路由操作,因为页面已经是用户想要看的页面。如果原始页面有某种状态保持机制(比如localStorage、sessionStorage或路由参数),可以恢复页面的状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值