hellowords

5541 经验值

感谢回复@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 ./~/[email protected]@vue-loader/lib/template-compiler?{"id":"data-v-808aabae"}!./~/[email protected]@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播放,听着还是很不错的。。。