有一天突然想到一个问题，网络上的权限控制：1.真的可以控制权限吗？2、只有靠前端，才能实现真正的权限控制？3、如果需要后台配合，应该怎么配合？也许这是个老生常谈的问题，但还是想整理一下，希望大家指出错误。什么是权限控制权限控制大致分为两个维度：纵向维度：权限控制用户可以访问哪些url；同一个url获取的数据不同）Web权限控制方案List前后端不分离：以Java为例，后端使用jsp、freemark、thmeleaf等模板渲染相应权限的数据，并渲染后呈现在浏览器前后终端分离：SPA单页应用，路由由前端控制，前端通过js控制hash路由权限SSR服务器渲染，Node中间层充当代理路由，并判断权限向浏览器渲染特定路由SPA前端权限控制方案SPA：Singlepagewebapplication（单页web应用）将所有web活动限制在一个html页面，使用js实现无刷新路由通过hash或browserhistoryapi跳转，前后端通过ajax数据进行通信，避免浏览器Refresh和reload，为用户提供流程的操作体验。这意味着前端接管了路由层，需要通过调用前端自身的MVC模块来渲染不同的页面。基于：Vue前端MVVM框架Vuex状态管理机Vue-router路由AxiosHTTP请求库1.登录事件Login//1.触发登录事件dispatch('login')//actionscommit(types.LOGIN_SUCCESS,res.data.data)...2。Base64编码后获取Token存入sessionStorage编码后存入本地sessionStoragelettoken=Base64.encode(data+':HIKDATAE')sessionStorage.setItem('userToken',token)//路由并跳转到目标页面router.push({name:'xxx'})},[types.LOGOUT_SUCCESS](state){state.authlock=true//注销成功回调，移除本地tokensessionStorage.removeItem('userToken')router.push({name:'Login'})}}3.所有HTTPHeadersAuthorization加上编码后的token（前后端可以约定规则）//axios请求钩子（request）axios.interceptors.request.use(req=>{lettoken=sessionStorage.getItem('user')if(token){//3.如果token存在，则后续所有请求的HTTP请求头Authorization都会携带base64编码的token，后台拿到后验证权限token.req.headers.Authorization=`Basic${token}`}req.data=qs.stringify(req.data)returnreq},error=>{returnPromise.reject(error)})浏览器httpheader4.req用户拦截：之后平台拿到token后，对每一个请求进行验证。验证失败则返回401，前端响应钩子统一捕获错误并跳转到登录页面//axios请求钩子（响应）axios.interceptors.response.use(res=>{returnres},error=>{if(error.response){switch(error.response.status){//4.所有接口响应验证钩子，如果token验证失败，后台返回401errorcode，清除token信息并跳转到登录pagecase401:store.commit(types.LOGOUT)router.replace({path:'/login'})}}returnPromise.reject(error)})5.路由跳转拦截：当任意路由跳转时，在路由beforeEachhook,检查本地token是否存在,不存在则跳转到登录页面//路由钩子(每次路由跳转前调用beforeEach钩子)=='/login'){sessionStorage.removeItem('userToken')}letuser=sessionStorage.getItem('userToken')if(!user&&to.path!=='/login'){//如果本地token没有存在，当任何路由跳转时，redirect到登录登陆页面next({path:'/login'})}else{next()}})6.Logout注销：清除本地sessionStorageToken信息//mutationsconstmutations={...[types.LOGOUT_SUCCESS](state){state.authlock=true//注销成功回调，移除本地tokensessionStorage.removeItem('userToken')router.push({name:'Login'})}}流程示意图如下：写完后，我觉得什么才是真正的安全权限？还有很长的路要走。.
