介绍
vue-auth-laravel 是一个适用于 Vue.js 的授权验证库，特别针对 Laravel 后端进行了优化，可以用来实现基于 token 的身份验证。
相比于其他授权验证库，vue-auth-laravel 具有简单易用、轻量快速等特点，后端支持 Laravel 5 和 6 版本。
安装
在使用 vue-auth-laravel 之前，需要先安装以下依赖：
- Vue.js 2.x
- vue-router 2.x
- axios
可以通过 npm 安装 vue-auth-laravel：
npm install vue-auth-laravel --save
使用
1. 在 Vue.js 项目中引入
-- -------------------- ---- -------
------ ---- ---- ------------------
------------- -
----- -
-------- -------- ----- ------ -
---------------------------------------- ---- --------------- ------- - - -------
--
--------- -------- ----- -
------ --------------
-
-
--2. 登录
在用户完成登录后，应该将后端返回的 token 值保存在本地（比如 localStorage）中：
axios.post('/api/login', {
email: 'test@example.com',
password: '123456'
})
.then(response => {
localStorage.setItem('token', response.data.token)
})3. 注销
在用户注销时，需要清除本地缓存：
localStorage.removeItem('token')4. 保护路由
在需要进行身份验证的页面中，可以使用 Vue Router 的 beforeEach 方法对用户身份进行检查：
-- -------------------- ---- -------
---------------------- ----- ----- -- -
-- ----------------------- -- -------------------------- -
----- ----- - -----------------------------
-- -------- -
------ ----- -------- --
- ---- -
------
-
- ---- -
------
-
--5. 发送请求
当需要发送请求时，可以使用 this.$http 方法：
this.$http.get('/api/user')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error.response)
})示例代码
下面是一个实际的 vue-auth-laravel 使用示例：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ ----- ---- -------
------ ---- ---- ------------------
------ --- ---- -----------
------------------
----- ------ - --- -----------
------- -
-
----- ---------
---------- -----
--
-
----- ----
---------- -----
----- - ------------- ---- -
-
-
--
------------- -
----- -
-------- -------- ----- ------ -
---------------------------------------- ---- --------------- ------- - - -------
--
--------- -------- ----- -
------ --------------
-
-
--
---------------------- - -----------------------
--------------------------------
-------- -- -
------ --------
--
----- -- -
-- ---------------------- --- ---- -
--------------------------------
---------------------
-
------ ---------------------
-
-
--- -----
-------
------- - -- ------
-----------------总结
vue-auth-laravel 提供了一种轻量、易用的身份验证解决方案，能够帮助开发者更快地搭建出基于 token 的认证系统。在实际项目中，开发者可以根据自己的实际需求进行相应的使用和拓展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672dc0520b171f02e1d13