前端面试题必背系列 + 持续更新中

Posted 2021-07-19 鲸渔要加油

一、怎么使用token访问带权限的页面

保存 token 到本地

token 是为了简化验证，后台返回的客户端进行请求的一个令牌

1. 首先我们会在登录页面发请求验证你的登录名和密码，如果通过则接收后台返回的 res ，在 res.data.token 中就是我们要的 token 字符串
2. 此时我们就将它保存在我们的页面
   window.sessionStorage.setItem('token', res.data.token)

路由导航守卫控制页面的访问权限

• 每次我们访问带有权限的页面的时候就需要 token 进行验证，所以我们要为路由对象调用 beforeEach(to, from, next) 函数
  to 将要访问的路径
  from 从哪个页面跳转来的
  next() 直接放行 next(地址) 强制跳转

// router 是路由实例
router.beforeEach((to, from, next) => {
  // login 是登录的页面地址
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

发起带权限的请求

需要授权的 API 需要在 请求头 中使用 Authorization 字段提供 token 令牌进行验证，所以要在路由中挂载到 vue 的原型对象之前设置 请求拦截器 ，将 token 放入我们发起请求的 请求头 中

axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

二、vue 的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程，vue 将他们分为三个大的阶段 挂载 更新 销毁 ，同时在这个过程中会运行一些叫做 生命周期钩子 的函数

挂载阶段

1. 实例创建前 beforeCreate
2. 实例创建后 created
3. 数据渲染前 beforeMount
4. 数据渲染后 mounted

更新阶段

5. 数据更新前 beforeUpdate
6. 数据更新后 updated

销毁阶段

7. 实例销毁前 beforeDestroy
8. 实例销毁后 destroyed