[laravel]使用vue作为前端,laravel作为后端,auth的方式进行认证,环境搭建

使用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的跨域登录