感谢回复@JellyBool , 我加上‘Bearer ’ 之后还是报这个错误,不知道是不是因为我没有引入vue-resource
这个包的原因
我看了上面朋友中的评论,在bootstrap.js
文件中的代码
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
request.headers.set('Authorization', Laravel.apiToken);
next();
});
我使用这种方式报错,interceptors 未定义好像
,同时我在控制台NetWork中查看后台页面的数据,发现Request Headers
中的参数没有api_tokn,并且X-CSRF-TOKEN:undefined
。
以下是blade模板中的相关代码
<!-- CSRF Token -->
<meta name="csrf-token" content="{ csrf_token() }">
<!-- API Token -->
<meta name="api_token" content="{ Auth::check() ? 'Bearer '.Auth::user()->api_token : 'Bearer ' }">
两个值都能取到,在bootstrap.js中都能打出来的
使用5.4bootstrap.js
中的方法成功了!
参考链接
你好,@JellyBool laravel 5.5 版本 使用视频中的方式api_token 认证报错了
bootstrap.js
// let token = document.head.querySelector('meta[name="csrf-token"]');
// let api_token = document.head.querySelector('meta[name="api_token"]');
let token = $('meta[name="csrf-token"]').attr('content');
let api_token = $('meta[name="api_token"]').attr('content');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
if(api_token){
window.axios.defaults.headers.common['Authorization'] = api_token.content;
} else {
console.error('API-Token');
}
vue组件
methods: {
changeStatus(row){
let data = {
id:row.id,
status:row.bulletin_status
};
this.axios.post('/api/admin/change_status', data).then(response =>{
return response;
});
}
app.js
require('./bootstrap');
import axios from 'axios';
import VueAxios from 'vue-axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import DataTables from 'vue-data-tables';
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.use(ElementUI);
Vue.use(DataTables);
Vue.use(VueAxios, axios);
Vue.component('example', require('./components/Example.vue'));
Vue.component('TableSearch', require('./components/TableSearch.vue'));
const app = new Vue({
el: '#app'
});
api.php 路由
Route::middleware('auth:api')->post('/admin/change_status', function (Request $request) {
return $request;
});
不知道是什么原因
哈哈,:) 可以了!谢谢,我之前只是将el-pagination包裹起来了,没效果,这下知道了!
element ui
组件,将table
组件和pagnation
组件合并成一个.vue
文件webpack编译过程中出错了Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
查了资料是不能有两个根节点,我尝试用div将分页包裹起来还是没效果
ERROR in ./~/_vue-loader@11.3.4@vue-loader/lib/template-compiler?{"id":"data-v-808aabae"}!./~/_vue-loader@11.3.4@vue-loader/lib/selector.js?type=template&index=0!./application/views/assets/js/components/TableCompany.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<el-table
ref="multipleTable"
:data="tableData"
border
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="company_name"
label="单位名称"
width="180">
</el-table-column>
<el-table-column
prop="company_user"
label="联系人"
width="80">
<template scope="scope">
<el-popover trigger="hover" placement="top">
<p>地区: scope.row.company_local </p>
<p>地址: scope.row.tax_number </p>
<p>业务员: scope.row.company_address </p>
<p>所属地区: scope.row.company_address </p>
<div slot="reference" class="name-wrapper">
<el-tag> scope.row.company_user </el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column
prop="tax_four_cell"
label="国税类型"
width="120">
</el-table-column>
<el-table-column
prop="seller_user"
label="所得税类型"
width="120">
</el-table-column>
<el-table-column
prop="company_address"
label="地址"
:formatter="formatter">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 2, 3, 4]"
:page-size="2"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
@ ./application/views/assets/js/components/TableCompany.vue 5:2-241
@ ./application/views/assets/js/main.js
可以1.5x播放,听着还是很不错的。。。