[英]User authentication using Laravel 5.4 API and Vue.js
I've created an API using Laravel 5.4 which provides me a token after logging in. So, in Vue.js project I've created an auth
folder and an index.js
file in it, so that it can be reusable. 我使用Laravel 5.4创建了一个API,该API在登录后为我提供了令牌。因此,在Vue.js项目中,我创建了一个
auth
文件夹和一个index.js
文件,以便可以重复使用。
Here's my auth/index.js
file: 这是我的
auth/index.js
文件:
import router from '../router'
import axios from 'axios'
export default {
user: {
authenticated: false
},
login(context, credentials, redirect) {
axios.post('http://localhost:8000/api/login', credentials)
.then(response => {
console.log(response);
if(response.data.success) {
localStorage.setItem('access_token', response.data.token)
this.user.authenticated = true;
router.go('/');
}
})
.catch(error => {
context.error = error;
});
}
}
Here's login()
method in my Login.vue
component: 这是我的
Login.vue
组件中的login()
方法:
<script>
import axios from 'axios';
import auth from '../../auth/'
export default {
data() {
return {
credentials: {
login: '',
password: ''
}
}
},
methods: {
login() {
auth.login(this, this.credentials, 'admin/dashboard');
}
}
}
</script>
I have a trouble in redirecting to my route after saving an access_token
to the localStorage
. 将
access_token
保存到localStorage
之后,我在重定向到路由时遇到麻烦。 The page is just being refreshed and that's all. 该页面只是刷新,仅此而已。 What's a workaround?
有什么解决方法?
router.go()
changed in VueJS 2.0 . router.go()
在VueJS 2.0中已更改。
You can use router.push({ name: "routerName"})
or just router.push("routerName")
now to redirect. 您现在可以使用
router.push({ name: "routerName"})
或仅使用router.push("routerName")
进行重定向。
Check the docs: https://router.vuejs.org/en/essentials/navigation.html 检查文档: https : //router.vuejs.org/en/essentials/navigation.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.