The first step: routing and more Add a custom field requireAuth
path: '/ Repository',
name: 'Repository', Meta: { requireAuth: to true, // add the field indicates that the route is required to enter login}, Component: the Repository
Step two:
Router .beforeEach ((to, from, Next) => {
IF (to.meta.requireAuth) { // determines whether the route to login permission IF (store.state.token) { // get the current token by vuex state whether there is Next ();} the else { Next ({ path: '/ Login', Query: { the redirect: to.fullPath} // jump routing path as a parameter, the login is successful jump to the routing})} } the else { Next ();}
Login interception to end here yet? not at all.
In this way simply front-end routing control, and can not really block access routes need to log in privileges. (Manually in the browser address bar enter without permission routing)
Another case is: a failure of the current token, but token is still stored locally.
This time when you need to log in to access rights to the route, in fact, should allow users to log in again.
This time it is necessary binding blocker + http backend interface http returned status code is determined.
The third step: Interceptor (unity in order to handle all the http requests and responses, you have to spend axios interceptors.)
Every jump page, must obtain a new route that corresponds to html page, which can be used when axios http interception of
Every jump routes are let back to test token is valid, add the token in the http header,
When the back-end interface to return 401 Unauthorized（未授权） , allowing users to log in again.
About Autorization used after ignores the cookie token, weakened the security be in line with https
// http request interceptor
axios.interceptors.request.use ( config => {
IF (store.state.token) { // determines whether there is a token, if present, are then each http header plus token config.headers = .Authorization `token $` {store.state.token};} return config;}, ERR => { return Promise.reject (ERR);}); // HTTP Response interceptor axios.interceptors.response.use ( = Response> { return Response;}, error => { IF (error.response) { Switch (error.response.status) { Case 401: 401 flags spirit medicine, only [authorization] spiritual health flags doctor is / / clear token 401 returned information and jump to the login page store.commit (types.LOGOUT); router.replace ({ path: 'Login',
Query: { the redirect: router.currentRoute.fullPath}})}} return Promise.reject (error.response.data) // returns the error message returned interface});
See the complete method /src/http.js .
Through the above steps that you can implement the login intercepted at the front.
登出 Functional and very simple, just need to remove the current token, you can jump to Home.
Jump back direct method:
In this way as long as no login or login timeout,
Access to any page will jump to the login page,
The page also does not require authentication to intercept