使用vue作为前端,laravel作为后端,auth的方式进行认证,环境搭建
之前公司使用的yii的框架,又跨域又ssl的,非常难搞,后续还会涉及到认证的问题,需要考虑的问题有
- 前后端分离
- 跨域
- 持久化登录
- 可以支持无密码登录(其他第三方账号)
配置apache
因为vue作为前端,需要把html的优先级提高到php之前
配置开发环境dev跨域问题
Header set Access-Control-Allow-Credentials true
Header set Access-Control-Allow-Origin “http://localhost:8080”
Header set Access-Control-Allow-Headers “x-xsrf-token,content-type”
nginx
add_header 'Access-Control-Allow-Origin' http://localhost:8080; add_header 'Access-Control-Allow-Headers' 'x-xsrf-token,content-type'; add_header 'Access-Control-Allow-Credentials' 'true';
配置laravel
创建laravel项目
laravel new laravel_auth
cd laravel_auth
引入扩展
composer require laravel/ui
php artisan ui vue --auth
创建数据库
php artisan migrate
查看接口
php .\artisan route:list
设置白名单
加入白名单,postman,vue才可以使用
配置vue
添加
axios
和vue-axios
依赖
main.js
文件写入引入
添加代码,进行登录,和登录判断
测试
dev环境测试
后台使用8070端口
前台vue使用8080端口
测试发送登录post
测试是否已经登录
生产环境测试
把vue项目build
build完成之后放到public下面
总结
通过以上的方式,我就完成了vue和laravel的跨域登录