小结

任务一：Vue 项目实战

05-11-TS的使用

1. Options APIs
   a. export default Vue.extend({ … })

2. Class APIs + decorator(@Prop等)

   31-登录-封装请求方法

3. 创建 axios 实例 src/utils/request.ts

4. 封装请求方法 src/services/user.ts
5. 调用请求方法 src/views/login/index.vue

   33-身份认证-把登录状态存储到Vuex容器中

• 同时存储到 Vuex 和 LocalStorage

  state: {
    user: JSON.parse(window.localStorage.getItem('user') || 'null')
  },
  mutations: {
    setUser (state, payload) {
      state.user = JSON.parse(payload)
      window.localStorage.setItem('user', payload)
    }
  },

  34-身份认证-校验页面访问权限

• 在路由中设置访问权限的属性 meta: { requiresAuth: true }

• 在路由拦截器中判断该属性，嵌套路由有一个该属性就不允许访问
  • 所以直接在父路由上设置即可 ```javascript { path: ‘/‘, component: layout, redirect: ‘/course’, meta: { requiresAuth: true }, children: [] }

router.beforeEach((to, from, next) => { // matched：所有嵌套的路由 if (to.matched.some(record => record.meta.requiresAuth)) { if (!store.state.user) { next({ name: ‘login’, query: { redirect: to.fullPath } }) } else { next() } } else { next() } })

<a name="KttjH"></a>
### 38-身份认证-使用请求拦截器统一设置Token
```javascript
request.interceptors.request.use(function (config) {
  const { user } = store.state
  if (user && user.access_token) {
    // 给所有请求添加 header: token
    config.headers.Authorization = user.access_token
  }
  return config
})

任务二：用户登录和身份认证

本小结业务基于登录接口数据

• access_token：授权令牌
• expires_in：token 过期时间
• refresh_token：刷新获取新的 token，只能使用一次

  axios 错误消息处理

1. 请求成功，响应失败（2xx以外）
2. 请求成功，没有响应（比如网络问题）
3. 请求失败

   基于 axios 的 token 失效问题

• refresh token 后，再请求之前的接口

• 同时出现多个错误请求，将请求挂起，存储到数组中

  • refresh token 后，依次执行数组中的接口

    任务三：用户权限

    任务四：角色权限管理

    

    任务五：课程管理

    02-03-在请求中，交互按钮应该加上 disable 或 loading 的状态

• el-button => :loading

• el-swtich => :disabled
• el-upload => el-progress