Heim > Artikel > PHP-Framework > Ü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.
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 ]); }
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中。
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: {}})
//请求头添加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:
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!