Über vue-cli4+laravel8 mit JWT-Anmeldung und Token-Überprüfung

In der folgenden Tutorial-Kolumne von laravel erfahren Sie, wie Sie die JWT-Anmeldung und die Token-Verifizierung mit vue-cli4+laravel8 verwenden. Ich hoffe, dass es für Freunde in Not hilfreich ist!

                                                                                                               

Zeichnen Sie alle möglichen seltsamen Probleme auf, die beim Lernen auftreten.

Ich werde jetzt nicht über JWT und Konfigurations-JWT schreiben.

1. Backend-Anmeldemethode Fallstrick, auf den ich getreten bin: Dem zurückgegebenen Token muss „Bearer +Token“ vorangestellt werden, wobei zwischen Bearer und Token ein Leerzeichen steht

2 Front-End-VUE-Empfang

    public function login(Request $request){
        $arr = $request->only(['email','password']);
        if(empty($arr)){
            return $this->response->array([
                'msg'=>'is null',
                'code'=>403,
                'data' => [],
            ]);
        }
        $token = Auth::guard('api')->attempt($arr); //获取token
        //未获得token时返回错误
        if(!$token){
            return $this->responseinfo('error',403,[]);
        }
        //返回当前用户
        $userAuth =Auth::guard('api')->user();
        //查找用户信息
        $user = Login::find($userAuth->id);
        $user->update([$user->updated_at = time()]);

        return $this->response->array([
            'msg'=>'success',
            'token' => 'Bearer '.$token,
            'code' => 200
        ]);

    }

3.vuex-Konfiguration

axios.post('/api/index/login', {
           email: this.email,
           password: this.password   })
          .then((response) =>{
              if(response.data.code === 200 ){
                let token = response.data.token
                Toast.success('登录成功')
                window.localStorage.setItem('token',token)
                this.$store.commit('setToken',token)
                return this.$router.push('/myhome')
              }else{
                Toast.fail('账户密码错误')
              }
          })这里是我的前端请求登录方法，在这里需要在后端成功返回之后，将token值保存在本地（localStorage.setItem），因为我这里用的vantui框架，所以要加上windows. 另外将token保存至vuex中。

4 Axios-Konfiguration

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({
  state: {
    // 保存公共数据 在设置vuex中的初值时，先从本地存储中取，如果取不到，则初始为空
    tokenInfo: window.localStorage.getItem('token') || {}
  },
  mutations: {
    setToken(state, tokenObj) {
      state.tokenInfo = tokenObj      // 因为刷新会丢失所以进行持久化 调用storage文件里方法
       window.localStorage.setItem('tokenInfo', tokenObj)
    }
  },
  actions: {},
  modules: {}})

Auf diese Weise ist Ihre Anmeldemethode abgeschlossen. Wenn Sie nach der Anmeldung zur Startseite springen, sendet die Startseite eine Anfrage zum Abrufen von Benutzerinformationen und das Token wird im Header übertragen. Werfen wir einen Blick auf die Token-Überprüfung Konfiguration

//请求头添加token_axios.interceptors.request.use(
  function(config) {
    let token = store.state.tokenInfo //获取token
    if (token) {
      config.headers.Authorization = token //在请求头中加入token
    }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  });

Verwenden Sie Middleware und konfigurieren Sie das Routing:

Schreiben Sie Ihre Controller-Methode, und Sie können normal darauf zugreifen. Jede Ihrer Anforderungen trägt das Token-Token, aber hier ist eines, das ich immer noch möchte Was ich bin Wenn das Token abläuft und der Browser 401 zurückgibt, muss Vues Axios das neue Token im vom Backend zurückgegebenen Anforderungsheader empfangen, das alte Token ersetzen und dann die API, die gerade nicht angefordert werden konnte, erneut anfordern Ich bin noch am Lernen und werde meinen Code erneut veröffentlichen, wenn die Funktionalität abgeschlossen ist.

Verwandte Empfehlungen:

Die neuesten fünf Laravel-Video-Tutorials

Das obige ist der detaillierte Inhalt vonÜber vue-cli4+laravel8 mit JWT-Anmeldung und Token-Überprüfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!