ElementUI电商项目实践（二）路由导航守卫控制访问权限如果用户没有登录，但是直接通过URL访问特定的页面，需要重

如果用户没有登录，但是直接通过URL访问特定的页面，需要重新导航到登录页面

退出功能

基于token的退出功能,只要销毁本地的token即可，这样后续的请求就不会携带token必须重新登录生成一个新的token之后才能访问页面

1.清空token

2.跳转到登录页

整体布局：先上下划分，再左右划分

选择想要的布局

粘贴到需要使用的组件中：

需要引入和注册

引入

import { Container, Header, Aside, Main } from 'element-ui'

Vue.use(Container)

Vue.use(Aside)

Vue.use(Main)

效果

主页header布局

flex布局 + less

html

css

效果

菜单分为二级，并且可以折叠

效果

需要授权的api，必须在请求头中使用Authorization字段提供token字牌

通过axios 请求拦截器添加token，保证拥有获取数据的权限

配置axios拦截器

ElementUI电商项目实践（二）