2021年3月2日 14:05:29 vue学习知识项目运用

vue学习知识项目运用

将前两天，学的axios的封装，express模拟服务器，token验证，登录拦截器，组合到项目中

流程：
1.axios的封装
2.登录功能的实现，主要是添加本地token，使用封装的axios
3.用户列表的信息获取，发送的请求头会携带token信息
4,退出登录的实现，给下拉列表添加点击事件，并删除本地token
（此处还有问题，退出后，应该删除服务器的session，以及token，还有token 的过时时间）
5.实现登录全局拦截器

出现的问题：
1.token验证时，设置请求头参数名称大小写不一致
authorization 注意此处不要写成Authorization，这个两个属性。后端中属性必须和这个完全一样

2.给下拉列表添加事件时，加不上
使用native才能添加成功

@click.native="logout"

注意：写此处代码时发现，不会vue事件的写法，
需，总结vue事件的写法

3.全局拦截器，是在router的index.js文件中配置

注意：router的写法有两种，一种是vue-router的写法，一种是声明全局的router，要写全局拦截器，现在只知道用全局可以写，需将原先的代码改为全局router的写法
。

router.beforeEach((to, from, next) => {
    console.log(to);
    if (to.path.startsWith('/login')) {
      next()
    } else {
      // 是否登陆，通过token，判断是否登录，没有token转到登录页面
      const token = localStorage.getItem("token");
      console.log(token);
      if (token) {
        next();
      } else {
        next({
          path: "/login"
        })
      }
    }
  });

总结：router 的两种写法：
1.vue-router写法，

创建router/indexjs文件，引入vue-router组件
直接new vue-router对象，配置对象内的属性
然后在main。js中引入router，通过vue.use导入对象

2.全局router的使用

创建router/indexjs文件，引入vue-router组件
声明匿名函数，在函数中，创建const router 变量，
赋值为new vue-router对象，配置对象内的属性，
下放通过router常量，调用全局拦截器
最后返回router对象

然后在main。js中引入router，
const router = Router();
即可使用。

代码如下
router index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'
import Main from '../components/Main'
import Login from '../view/Login'
import UserList from '../view/user/List'
import UserProfile from '../view/user/Profile'
import NotFound from "../view/NotFound";

Vue.use(VueRouter);

export default function () {
  const router = new VueRouter({
    mode: 'history',
    routes: [
      {
        path: '/login',
        name: 'login',
        component: Login
      },
      {
        path: '/content',
        name: 'content',
        component: Content
      },
      {
        path: '/main/:name',
        name: 'main',
        props: true,
        component: Main,
        children: [
          {
            path: '/user/profile/:id', props: true,
            name: 'userProfile',
            component: UserProfile,
          },
          {path: '/user/list', component: UserList}
        ]
      },
      {
        path: '/gohome',
        redirect: '/main'
      },
      {
        path: '*',
        component: NotFound
      }

    ]

  });
  router.beforeEach((to, from, next) => {
    console.log(to);
    if (to.path.startsWith('/login')) {
      next()
    } else {
      // 是否登陆，通过token，判断是否登录，没有token转到登录页面
      const token = localStorage.getItem("token");
      console.log(token);
      if (token) {
        next();
      } else {
        next({
          path: "/login"
        })
      }
    }
  });
  return router;
}

main.js代码

import Router from './router'

const router = Router();

总结：

熟悉了前两天知识的运用，
axios封装，token验证，express使用，全局拦截器配置。
不足之处：学习vue的事件写法，并进行总结。